React：基于状态的样式

Question

我有以下 React 组件：

class Parent extends Component {
  constructor(props) {
    super(props)

    this.state = {
      content: 'bad'
    }
  }

  render() {
    return (
      <div className="content-div">
        {this.state.content}
      </div>
    )
  }
}

我想根据this.state.content的文字渲染<div>，即如果文字是'bad'，则背景色为红色，如果文字不是'bad'，则颜色为绿色.

通过 CSS 执行此操作的最佳方式是什么（或者可能有其他更好的方式）？

Answer 1

其实有很多方法可以做到，这里是常规的方法

<div className="content-div" style={this.state.content === 'bad' ? {backgroundColor: 'red'} : {backgroundColor: 'green'} }>
        {this.state.content}
      </div>

更新：

因为我更喜欢你对类使用相同的语法

<div className={this.state.content === 'bad' ? 'myBadClass' : 'MyGreenClass'} >
        {this.state.content}
      </div>