基於反應組件狀態更新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"/>