在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);
如何组合多个对象并将它们分配在一起?
当前回答
我发现这个方法最适合我。它会像预期的那样重写。
return <View style={{...styles.local, ...styles.fromProps}} />
其他回答
所以基本上我看问题的方式是错误的。从我所看到的，这不是一个React特定的问题，更多的是一个JavaScript问题，在我如何结合两个JavaScript对象在一起(没有打击类似命名的属性)。
在这个StackOverflow的答案中，它解释了这一点。如何动态合并两个JavaScript对象的属性?
在jQuery中，我可以使用extend方法。
如果你正在使用React Native，你可以使用数组符号:
<View style={[styles.base, styles.background]} />
请查看我关于这方面的详细博文。
为了更进一步，你可以创建一个类名类的helper函数:
const styleRules = (...rules) => {
return rules.filter(Boolean).reduce((result, rule) => {
return { ...result, ...rule };
}, {});
};
然后在你的组件中有条件地使用它:
<div style={
styleRules(
divStyle,
(window.innerWidth >= 768) && divStyleMd,
(window.innerWidth < 768) && divStyleSm
)
}>Hello World!</div>
内联样式化的方法:
<View style={[styles.red, {fontSize: 25}]}>
<Text>Hello World</Text>
</View>
<View style={[styles.red, styles.blue]}>
<Text>Hello World</Text>
</View>
<View style={{fontSize:10,marginTop:10}}>
<Text>Hello World</Text>
</View>
在React中有多个内联样式。
<div onClick={eleTemplate} style={{'width': '50%', textAlign: 'center'}}/>
