在 Toggle 上添加第二个类时反应语法错误答案

【问题标题】：React Syntax error on adding a second class on Toggle在 Toggle 上添加第二个类时反应语法错误
【发布时间】：2017-11-07 01:27:24
【问题描述】：

如果我附加 'toggle-button' 类不起作用，我如何将第二类添加到我的 <div>“按钮”。

<CSSTransitionGroup
    transitionName="buttonAninmated"
    transitionEnterTimeout={300}
    transitionLeaveTimeout={300}
>
    <div className={['toggle-button', this.state.active ? 'active-button': null]} onClick={this.toggleMenu}>
        <span></span>
        <span></span>
        <span></span>
    </div>
</CSSTransitionGroup>

【问题讨论】：

标签： html css class reactjs sass

【解决方案1】：

用template literals写：

className = {`toggle-button ${this.state.active ? `active-button` : ``}`}

或者用+写：

className = {"toggle-button " + this.state.active ? "active-button" : ""}

要应用多个类，请写下所有类名空格分隔。

【讨论】：

【解决方案2】：

<div className={"toggle-button " + (this.state.active ? 'active-button' : '')}>

注意切换按钮后的空格

【讨论】：