Question

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

我的反应组件状态中有一个名为inverted的变量，并希望根据它是divs还是{{1}来更新我的true个数的类名}}。

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

Answer 1

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

如果您有多个divs需要相同的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"/>

基于反应组件状态

1 个答案: