将条件CSS类应用于ReactJS代码

伊莱恩·拜恩（Elaine Byene）

我觉得我按照文档做得正确，但没有发生。我知道也有类似的问题，但是我的代码无法正常工作。它没有正确编译该类。

这是我的代码，如果用户角色正确，则可以单击。

<h4 
  onClick={(e) => {
    e.stopPropagation();
    if (this.props.role === 'owner' || this.props.role === 'member' || this.state.task.OwnerId === user_Proj.User.ID) {
      this.setState({MakeConfirm: true})
    }
  }}
  className="title {this.props.role === 'owner' ? 'owner__yes':'owner__no'}"
>
  Button
</h4>

输出未编译CSS类。这是需要修复的输出。

<h4 class="complete {this.props.role === 'owner' ? 'owner__yes':'owner__no'}">Button</h4>

优素福

问题在于三元运算符没有被解析为javascript代码，因为它用双引号引起来。

更改

className="title {this.props.role === 'owner' ? 'owner__yes':'owner__no'}"

至

className={'title ' + (this.props.role === 'owner') ? 'owner__yes':'owner__no'}

注意圆括号this.props.role === 'owner'。它们很重要，因为如果您跳过括号，javascript将首先this.props.role与串联，'title'然后检查串联的字符串是否等于'owner'。为避免此问题，请this.props.role === 'owner'用括号括起来。