React.js | 如何以更好的方式处理className？

Question

我想使用事件和状态来处理className，就像这样

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 ）以更好的方式实现相同的目标，如下所示：

首先导入className：

import className from 'classnames'

第二个从你的州获得课程：

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

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

<span class='bar active otherClass'  />

或者像这样，如果是假的

<span class='bar'  />

Answer 2

尝试这个：

class SampleComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      itemName='bar'
    };
  }

  handleItemClick(itemName) {
    this.setState({itemName:itemName});
  }

  render() {
    return (
      <div>
        <span className={this.state.itemName == 'bar' ? 'bar active' : 'bar'} onClick={this.handleItemClick.bind(this, 'bar')}>bar</span>
        <span className={this.state.itemName == 'foo' ? 'bar active' : 'bar'} onClick={this.handleItemClick.bind(this, 'foo')}>foo</span>
      </div>
    );
  }
}

Answer 3

这稍微清洁一点

class SampleComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      activeBar: 0
    };
  }

  handleBarClick(number) {
    this.setState({
      activeBar: number
    });
  }

  render() {
    var class1 = this.state.activeBar == 1 ? "bar active" : "bar";
    var class2 = this.state.activeBar == 2 ? "bar active" : "bar";

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

Answer 4

我会这样做：

class SampleComponent extends React.Component {

  state = {
    activeIndex: 0
  };

  handleClick(index) {
    this.setState({ activeIndex: index });
  }

  render() {
    const { activeIndex } = this.state;

    return (
      <div>
        {
          ['bar', 'foo'].map((item, index) => (
            <span
              className={`bar${activeIndex === index ? ' active' : ''}`}
              onClick={() => this.handleClick(index)}
              key={index}
            >
              {item}
            </span>
          ))
        }
      </div>
    );
  }
}

请参阅演示小提琴： https ： //jsfiddle.net/free_soul/6snyL2rc/