在具有json样式定义的React组件上有条件地应用样式

Question

我有一个组件，其中样式以json的形式应用，我需要有条件地重写样式。

参见样式定义：

const classes = {
txt: {
color: 'green',
...
},
txtBlue:{
color: 'blue',
..
},
};

参见模板：

<div style={classes.txt + (this.state.goBlue ? classes.txtBlue)}></div>

我上面写的+ (this.state.goBlue ? classes.txtBlue)不起作用，它只是为了展示我需要理解和发挥作用。

当this.state.goBlue为true时，我希望classes.txt和classes.txtBlue都应用于div。

感谢

Answer 1

如果没有正确使用三元运算符，可以执行以下操作：

<div style={ this.state.goBlue ? { ...classes.txt, ...classes.txtBlue } : classes.txt }></div>

如果this.state.goBlue是真的，这将应用两种样式，否则它将仅应用classes.txt。

Answer 2

找到了解决方案！

通过将其添加到render()函数：

const txtStyle =
this.state.goBlue ?
Object.assign({}, classes.txt, classes.txtBlue) :
Object.assign({}, classes.txt);

这个到模板：

<div style={txtStyle}></div>

我能够实现我想要的。