如何组合多个内联样式对象?

在React中,您可以清楚地创build一个对象并将其分配为内联样式。 即。 如以下所说的。

var divStyle = { color: 'white', backgroundImage: 'url(' + imgUrl + ')', WebkitTransition: 'all', // note the capital 'W' here msTransition: 'all' // 'ms' is the only lowercase vendor prefix }; var divStyle2 = {fontSize: '18px'}; React.render(<div style={divStyle}>Hello World!</div>, mountNode); 

如何组合多个对象并将它们分配在一起?

你可以使用扩展运算符:

  <button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button 

如果您使用React Native,则可以使用数组表示法:

 <View style={[styles.base, styles.background]} /> 

有关更多信息,请参阅文档 。

你可以用Object.assign()来做到这一点。

在你的例子中,你会做:

 ReactDOM.render( <div style={Object.assign(divStyle, divStyle2)}> Hello World! </div>, mountNode ); 

这将合并这两种风格。 如果有匹配的属性,第二个样式将replace第一个样式。

正如Brandon指出的那样,如果您想要在不应用fontSize的情况下重用divStyle ,则应该使用Object.assign({}, divStyle, divStyle2)

我喜欢用这个来创build具有默认属性的组件。 例如,下面是一个默认的margin-right无状态组件:

 const DivWithDefaults = ({ style, children, ...otherProps }) => <div style={Object.assign({ marginRight: "1.5em" }, style)} {...otherProps}> {children} </div>; 

所以我们可以渲染这样的东西:

 <DivWithDefaults> Some text. </DivWithDefaults> <DivWithDefaults className="someClass" style={{ width: "50%" }}> Some more text. </DivWithDefaults> <DivWithDefaults id="someID" style={{ marginRight: "10px", height: "20px"}}> Even more text. </DivWithDefaults> 

哪个会给我们结果:

 <div style="margin-right:1.5em;">Some text.</div> <div style="margin-right:1.5em;width50%;" class="someClass">Some more text.</div> <div style="margin-right:10px;height:20px;" id="someID">Even more text.</div> 

Object.assign()是一个简单的解决scheme,但是(当前) 最好的答案是使用它(尽pipe做无状态的组件很好)会导致OP期望合并两个state objects

有了两个参数, Object.assign()实际上会改变第一个对象,影响将来的实例化。

例如:

考虑一个盒子的两种可能的样式configuration:

 var styles = { box: {backgroundColor: 'yellow', height: '100px', width: '200px'}, boxA: {backgroundColor: 'blue'}, }; 

所以我们希望我们所有的盒子都有默认的“盒子”样式,但是要覆盖一些不同的颜色:

  //this will be yellow <div style={styles.box}></div> //this will be blue <div style={Object.assign(styles.box, styles.boxA)}></div> //this SHOULD be yellow, but it's blue. <div style={styles.box}></div> 

一旦Object.assign()执行,'styles.box'对象就会被更改。

解决方法是将一个空对象传递给Object.assign() 。 这样做,你告诉方法产生一个新的对象与你通过它的对象。 像这样:

  //this will be yellow <div style={styles.box}></div> //this will be blue <div style={Object.assign({}, styles.box, styles.boxA)}></div> //a beautiful yellow <div style={styles.box}></div> 

这种对象变异的概念对于React是至关重要的,正确使用Object.assign()对使用像Redux这样的库真的很有帮助。

所以基本上我以错误的方式来看待这个问题。 从我所看到的,这不是一个React特定的问题,更多的是如何将两个JavaScript对象组合在一起的JavaScript问题(没有类似命名属性的clobber)。

在这个StackOverflow答案中解释它。 如何dynamic合并两个JavaScript对象的属性?

在jQuery中,我可以使用扩展方法。

为了扩展@PythonIsGreat的说法,我创build了一个全局函数,可以为我做到这一点:

 var css = function(){ var args = $.merge([true, {}], Array.prototype.splice.call(arguments, 0)); return $.extend.apply(null, args); } 

这将对象深深地扩展为一个新的对象,并允许可变数量的对象作为参数。 这可以让你做这样的事情:

 return( <div style={css(styles.base, styles.first, styles.second,...)} ></div> ); var styles = { base:{ //whatever }, first:{ //whatever }, second:{ //whatever } } 

我已经build立了一个模块,如果你想添加样式基于这样的条件:

 multipleStyles(styles.icon, { [styles.iconRed]: true }) 

https://www.npmjs.com/package/react-native-multiple-styles