Question

我有一个简单的React按钮，可以打开和关闭类名。

但是我如何添加其他类，例如

<div className={this.state.active ? this.state.feature : null} "another-class">

我可以添加它们而不是null，但是我希望该类位于切换类的顶部

export default class Feature extends React.Component {

  state = {
    feature: this.props.otf,
    active: false,
  }

  toggleClass = () => {
    const currentState = this.state.active;
    this.setState({ active: !currentState });
  };

  render() {
    return (
      <div className="feature">
        <button onClick={this.toggleClass} ></button>

        <div className={this.state.active ? this.state.feature : null} >

        </div>

      </div>
    )
  }
}

Answer 1

您可以执行以下操作：

<div className={`${this.state.active ? 'is-active': ''} class1 class2 class3`}>Content</div>

Answer 2

尝试这样：

<div className={"another-class " + (this.state.active ? this.state.feature : "")} >

您可以将"another-class"移动到任何地方（LHS或RHS）

Answer 3

嗨，请检查此方法。

render() {
    let button_name = "class";
    if(this.state.active) {
       button_name = "active class";
    }
    return (
      <div className="feature">
        <button onClick={this.toggleClass} ></button>
        <div className={button_name} >
        </div>
      </div>
    )
  }

React-与动态类一起添加类

3 个答案: