Question

如何在我的<div>＆＃34;按钮＆＃34;中添加第二课程？如果我追加＆＃39;切换按钮＆＃39;班级不起作用。

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

Answer 1

使用template literals：

撰写

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

或使用+：

撰写

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

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

Answer 2

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

注意切换按钮后的空格

在Toggle上添加第二个类时出现React Syntax错误

2 个答案: