reactjs - 有条件地在具有 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为真时，我希望两者都classes.txt适用classes.txtBlue于div.

谢谢

标签： reactjs

Answer 1

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

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

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