在React中，你可以清楚地创建一个对象，并将其赋值为内联样式。即. .下面所提到的。
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);
如何组合多个对象并将它们分配在一起?
当前回答
所以基本上我看问题的方式是错误的。从我所看到的，这不是一个React特定的问题，更多的是一个JavaScript问题，在我如何结合两个JavaScript对象在一起(没有打击类似命名的属性)。
在这个StackOverflow的答案中，它解释了这一点。如何动态合并两个JavaScript对象的属性?
在jQuery中，我可以使用extend方法。
其他回答
所以基本上我看问题的方式是错误的。从我所看到的，这不是一个React特定的问题，更多的是一个JavaScript问题，在我如何结合两个JavaScript对象在一起(没有打击类似命名的属性)。
在这个StackOverflow的答案中，它解释了这一点。如何动态合并两个JavaScript对象的属性?
在jQuery中，我可以使用extend方法。
其实有一种正式的组合方式，如下所示:
<View style={[style01, style02]} />
但是，有一个小问题，如果其中一个被父组件传递，并且它是通过组合形式的方式创建的，我们就有一个大问题:
// The passing style02 from props: [parentStyle01, parentStyle02]
// Now:
<View style={[style01, [parentStyle01, parentStyle02]]} />
最后一行导致UI bug, React Native不能处理数组中的深数组。所以我创建了我的helper函数:
import { StyleSheet } from 'react-native';
const styleJoiner = (...arg) => StyleSheet.flatten(arg);
通过使用我的styleJoiner，你可以在任何地方组合任何类型的风格和组合风格。即使是未定义的或其他无用的类型也不会破坏样式。
你可以使用展开运算符:
<button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button
对于那些在React中寻找这个解决方案的人，如果你想在风格中使用扩散操作符，你应该使用:babel-plugin-transform-object-rest-spread。
通过npm模块安装它，并配置你的.babelrc:
{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread"]
}
然后你可以用like…
const sizing = { width: 200, height: 200 }
<div
className="dragon-avatar-image-background"
style={{ backgroundColor: blue, ...sizing }}
/>
更多信息:https://babeljs.io/docs/en/babel-plugin-transform-object-rest-spread/
你可以用Object.assign()来实现。
在你的例子中，你会这样做:
ReactDOM.render(
<div style={Object.assign(divStyle, divStyle2)}>
Hello World!
</div>,
mountNode
);
这样两种风格就合并了。如果有匹配的属性，则第二个样式将取代第一个样式。
正如Brandon所指出的，您应该使用Object。分配({}，divStyle, divStyle2)如果你想重用divStyle没有fontSize应用到它。
我喜欢使用它来创建具有默认属性的组件。例如，这里有一个默认右边距的无状态组件:
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>
