有条件地在具有json-style定义的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为真时，我希望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>

我能够实现自己想要的。