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'，背景颜色为红色，文字不是{{1}然后颜色是绿色。

通过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>

反应：基于状态的样式

1 个答案: