ReactJS嵌套的内嵌样式

我有一个在ReactJSReactJS嵌套的内嵌样式

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> 
     ); 
    } 
});

这里命名为SearchBar成分是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 textform没有width:90%，因为我在styles中声明。我想使用样式继承，以便在style中放入一个内联样式数组。我在这里有什么问题吗？我如何在ReactJS中继承样式？

来源

2015-10-05 necroface

查看文档https://facebook.github.io/react/tips/inline-styles.html – knowbody

我的确有参考。它说的太少，并没有关于我卡住了什么。请再次阅读我的问题，我想要风格继承？我怎样才能继承样式？ – necroface

在documentation，

在反应，内嵌样式没有被指定为一个字符串。相反，他们与一个对象，其关键是 的风格名称，驼峰格式版本，它的值是风格的价值，通常是一个字符串指定

它明确指出，style需要有一个键值对的对象，而不是数组。它背后没有魔法。样式对象可以用香草JS或一些实用程序库（例如lodash,underscore，jQuery）组成，它可以适合您的项目。

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

来源

2015-10-17 10:51:40 Season

在React项目中，vanilla'Object.assign'可能比'$ .extend'更频繁使用。 – Dave

@Dave，我承认，在编写React组件时，我倾向于使用比jQuery更多的lodash和vanilla JS。答案已经修改以反映这个事实。谢谢你的评论。 – Season

ReactJS嵌套的内嵌样式

回答

相关问题