在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);
如何组合多个对象并将它们分配在一起?
当前回答
你可以使用展开运算符:
<button style={{...styles.panel.button,...styles.panel.backButton}}>Back</button
其他回答
我发现这个方法最适合我。它会像预期的那样重写。
return <View style={{...styles.local, ...styles.fromProps}} />
你可以使用作曲
const styles = StyleSheet.create({
divStyle :{
color: 'white',
backgroundImage: 'url(' + imgUrl + ')',
WebkitTransition: 'all', // note the capital 'W' here
msTransition: 'all' // 'ms' is the only lowercase vendor prefix
},
divStyle2 :{fontSize: '18px'}
})
React.render(<div style={StyleSheet.compose(styles.divStyle, styles.divStyle2)}>Hello World!</div>, mountNode);
OR
React.render(<div style={[styles.divStyle, styles.divStyle2]}>Hello World!</div>, mountNode);
Object.assign()是一个简单的解决方案，但是(目前)最常用的答案使用它——虽然用于制作无状态组件还不错，但会导致OP合并两个状态对象的理想目标出现问题。
有了两个参数，object .assign()实际上会原地改变第一个对象，从而影响未来的实例化。
Ex:
考虑一个盒子的两种可能的样式配置:
var styles = {
box: {backgroundColor: 'yellow', height: '100px', width: '200px'},
boxA: {backgroundColor: 'blue'},
};
所以我们希望所有的盒子都有默认的“box”样式，但想用不同的颜色覆盖一些:
// 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. assign()Box的对象被永久更改。
解决方案是将一个空对象传递给object .assign()。这样做是在告诉该方法用传递给它的对象生成一个NEW对象。像这样:
// 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等库非常有帮助。
其实有一种正式的组合方式，如下所示:
<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，你可以在任何地方组合任何类型的风格和组合风格。即使是未定义的或其他无用的类型也不会破坏样式。
在React中有多个内联样式。
<div onClick={eleTemplate} style={{'width': '50%', textAlign: 'center'}}/>
