[英]Best way to update className based on react component state
What is the best way to update a Classname field based on the state of a react component? 根据反应组件的状态更新Classname字段的最佳方法是什么?
I have a variable called inverted
in the state of my react component and want to update the classname of a number of my divs
based on whether it is true
or false
. 我在我的react组件的状态中有一个名为inverted
的变量,并希望根据它是true
还是false
来更新我的divs
类名。
What is the best way to go about this? 最好的方法是什么? Should I have a separate method to update the classnames? 我应该有一个单独的方法来更新类名吗? And if so, how do I deal with the asynchronicity of the setState method? 如果是这样,我该如何处理setState方法的异步性? If I should update it within the div, what is the best way to do this? 如果我应该在div中更新它,那么最好的方法是什么?
Setting a function might help if you need the same className
on different methods; 如果在不同方法上需要相同的className
,则设置函数可能会有所帮助; or if your render
method is so big that you need to break it in small pieces. 或者如果你的render
方法太大,你需要将它分成小块。 But usually you only need the className
in the render
method. 但通常你只需要render
方法中的className
。
If you have several divs
that need the same className
, I recommend to just use a local variable inside the render
method. 如果你有几个需要相同className
divs
,我建议在render
方法中使用一个局部变量。 That will keep the code simple to follow and short. 这将使代码易于遵循和简短。 Check the following code snippet for an example of that: 请查看以下代码段以获取示例:
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}> </div> <div className={this.state.inverted ? 'white' : 'yellow'}> {this.state.inverted ? 'Argentina' : 'España'} </div> <div className={classNameDivs}> </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"/>
But you usually don't need to set a className
more than once, because usually you can handle it better via CSS. 但是你通常不需要多次设置className
,因为通常你可以通过CSS更好地处理它。 For instance, the conditional className
can be used at the parent element of all the divs
. 例如,条件className
可以在所有divs
的父元素中divs
。 The divs
then will have a regular className
in JS and will use the conditional parent in the CSS side. 然后, divs
将在JS中具有常规className
,并将在CSS端使用条件父级。 Same example as before, but defining the conditional className
only once in JS, in the following snippet: 与之前的示例相同,但在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'> </div> <div className='middle'>{this.state.inverted ? 'Argentina' : 'España'}</div> <div className='top-bottom'> </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"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.