根据状态更改React js更新类名

Question

是否可以通过状态更改来更新classNames var（在本例中为“ btClasses”）？

...
    state = {
       active: true
    };

    btClasses = classNames({
      'main-class': true,
      'activeClass': this.state.active
    });

    _handleBtn = () => {
       this.setState({active: !this.state.active});
    } 

    return (
        <button 
           onClick={this._handleBtn} 
           className={btClasses} \>
    );
... 

Answer 1

您可以将btClasses转换为功能：

class MyComponent extends React.Component {
  state = {
    active: true,
  };

  btClasses = () =>
    classNames({
      'main-class': true,
      activeClass: this.state.active,
    });

  _handleBtn = () => {
    this.setState({ active: !this.state.active });
  };

  render() {
    return <button onClick={this._handleBtn} className={btClasses()} />;
  }
}

或简单地内联它：

render() {
  return (
    <button
      onClick={this._handleBtn}
      className={classNames({
        'main-class': true,
        activeClass: this.state.active,
      })}
    />
  );
}