css - react : state-based styling

Question

我有以下 React 组件:

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

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

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

我想渲染 <div>基于 this.state.content 的文字，即如果文本是 '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>