基于反应组件状态更新className的最佳方法

Question

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

我在我的react组件的状态中有一个名为inverted的变量，并希望根据它是true还是false来更新我的divs类名。

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

Answer 1

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

如果你有几个需要相同className divs ，我建议在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 。 然后， 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"/>