javascript - react .js |如何以更好的方式处理类名？

Question

我想像这样使用事件和状态来处理类名

class SampleComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      class1: 'bar',
      class2: 'bar'
    };
  }

  handleBarClick() {
    this.setState({
      class1: 'bar active',
      class2: 'bar'
    });
  }

  handleFooClick() {
    this.setState({
      class1: 'bar',
      class2: 'bar active'
    });
  }

  render() {
    return (
      <div>
        <span className={this.class1} onClick={this.handleBarClick.bind(this)}>bar</span>
        <span className={this.class2} onClick={this.handleFooClick.bind(this)}>foo</span>
      </div>
    );
  }
}

但是这段代码有点浪费，应该更简洁一些。

我想写得更好，谁能给些建议？谢谢。

Answer 1

您可以使用 classNames ( https://github.com/JedWatson/classnames ) 以更好的方式实现相同的效果，如下所示:

首先导入类名:

import className from 'classnames'

其次从您所在的州获取类(class):

<span className={ className('bar', {'active': this.state.active, 'otherClass': this.state.booleanValue }) } />

如果你在 active 和 booleanValue 中有 true，这将像这样结束:

<span class='bar active otherClass'  />

如果为假则这样

<span class='bar'  />