ReactJS 嵌套的内联样式

Question

我在 ReactJS 中有一个名为 SearchBar 的组件

var SearchBar = React.createClass({
    render: function () {
        return (
            <div style={{width:'100%',position:'0',backgroundColor:'darkOrange'}}>
                <div style={[styles.dataBlock,styles.header]}>
                    <h1>MOVIE</h1>
                </div>
                <div styles={[styles.dataBlock,styles.searchForm]}>
                    <input style={[styles.dataBlock,styles.searchForm,styles.searchField]}
                        type="text" placeholder="Enter search term"/>
                </div>
            </div>
        );
    }
});

这里是styles：

var styles = {
    dataBlock: {
        width: '100%',
        height: '100%',
        margin: '0 auto',
        fontFamily: 'Helvetica',
        textAlign: 'center'
    },
    header: {
        width: 'inherit',
        marginLeft: 'auto',
        marginRight: 'auto'
    },
    searchField: {
        width: 'inherit'
    },
    searchForm: {
        width: '90%',
        marginLeft: 'auto',
        marginRight: 'auto'
    }
};

样式似乎不起作用，表明input 文本表单没有width:90%，正如我在styles 中声明的那样。我想使用样式继承，以便在style 中放入一组内联样式。我这里有什么问题吗？如何在 ReactJS 中继承样式？

Answer 1

在documentation，

在 React 中，内联样式不指定为字符串。相反，他们 用一个对象指定，其键是驼峰式版本的 样式名称，其值为样式的值，通常为字符串

它明确指出style 需要是键值对的对象，而不是数组。背后没有魔法。样式对象可以用 vanilla JS 或一些实用程序库组成，如 lodash、underscore、jQuery，任何适合您项目的东西。

// Vanilla JS
<div style={ Object.assign( styles.dataBlock, styles.searchForm ) }> ...
// Lodash
<div style={ _.assign( styles.dataBlock, styles.searchForm ) }> ...