有条件地使用三元运算符应用类

Question

我有一个Button组件，如果状态为真，我想分配一个活动课程。

<Button 
    onClick={this.preferenceHandler.bind(this, "straight")}  
    className={"col-sm-12 text-center " + (this.state.straight ? "active") }
    viewStyle=  "primary"
>
    <h4>Straight</h4>
    <i className="icon icon-ok-6"></i>
</Button>

Answer 1

你需要那里的虚假表达：

className={"col-sm-12 text-center " + (this.state.straight ? "active" : "") }

Answer 2

如果使用classnames

，使用条件类会更好

var btnClass = classNames({
  'col-sm-12': true,
  'text-center': true,
  'active': this.state.straight
});
<Button 
    onClick={this.preferenceHandler.bind(this, "straight")}  
    className={btnClass}
    viewStyle="primary"
>
    <h4>Straight</h4>
    <i className="icon icon-ok-6"></i>
</Button>

Answer 3

与@rossipedia类似，但使用ES6模板字符串

＆＃13;

＆＃13;

className={`col-sm-12 text-center ${this.state.straight ? 'active' : ''}`}

＆＃13;

＆＃13;

＆＃13;