javascript - 根据 react 组件状态更新类名的最佳方法

Question

根据 React 组件的状态更新 Classname 字段的最佳方法是什么？

我在我的 React 组件的状态中有一个名为 inverted 的变量，我想根据它是否为 更新我的一些 divs 的类名真 或假。

解决此问题的最佳方法是什么？我应该有一个单独的方法来更新类名吗？如果是这样，我该如何处理 setState 方法的异步性？如果我应该在 div 中更新它，最好的方法是什么？

Answer 1

如果您在不同的方法上需要相同的 className，那么设置一个函数可能会有所帮助；或者，如果您的 render 方法太大，您需要将其分解成小块。但通常你只需要 render 方法中的 className。

如果您有多个 div 需要相同的 className，我建议只在 render 方法中使用局部变量。这将使代码简单易懂且简短。检查以下代码片段以获取示例:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inverted: true
    };
    this.toggleInverted = this.toggleInverted.bind(this);
  }

  toggleInverted() {
    this.setState({inverted: !this.state.inverted});
  }

  render () {
    const classNameDivs = this.state.inverted ? 'sky-blue' : 'red';
    return(
      <div>
        <input type="checkbox" checked={this.state.inverted} onChange={this.toggleInverted} />
        <div className={classNameDivs}>&nbsp;</div>
        <div className={this.state.inverted ? 'white' : 'yellow'}>
          {this.state.inverted ? 'Argentina' : 'España'}
        </div>
        <div className={classNameDivs}>&nbsp;</div>
      </div>
    )
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('container'));

.red {
  background-color: #c60b1e;
}
.yellow {
  background-color: #ffc400;
}
.sky-blue {
  background-color: #74acdf;
}
.white {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"/>

但是您通常不需要多次设置className，因为通常您可以通过CSS 更好地处理它。例如，条件 className 可以用在所有 divs 的父元素上。 divs 然后将在 JS 中有一个常规的 className 并将在 CSS 端使用条件父级。与之前相同的示例，但在 JS 中仅定义一次条件 className，在以下代码段中:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inverted: true
    };
    this.toggleInverted = this.toggleInverted.bind(this);
  }

  toggleInverted() {
    this.setState({inverted: !this.state.inverted});
  }

  render () {
    return(
      <div className={this.state.inverted ? 'argentina-flag' : 'espania-flag'}>
        <input type="checkbox" checked={this.state.inverted} onChange={this.toggleInverted} />
        <div className='top-bottom'>&nbsp;</div>
        <div className='middle'>{this.state.inverted ? 'Argentina' : 'España'}</div>
        <div className='top-bottom'>&nbsp;</div>
      </div>
    )
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('container'));

.espania-flag .top-bottom {
  background-color: #c60b1e;
}
.espania-flag .middle {
  background-color: #ffc400;
}
.argentina-flag .top-bottom {
  background-color: #74acdf;
}
.argentina-flag .middle {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"/>