React初学者操作class的疑惑？

Question

就是简单的切换class，多个元素，点击哪个就给哪个添加 “curr”class,其他元素移除“curr”，

//jQuery 如下$("el").addClass("curr").siblings().removeClass("curr")

React 中怎么写呢？下面这个方法很蠢，不知如何是好？

Answer 1

你写的没有什么问题，但是可以优化一下点击了已经是curr的div，可以不用重新renderchoose-opts里面的重复内容可以批量生成没有必要记录所有的curr信息，只需要当前的var&nbsp;Hello&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;&nbsp;&nbsp;getInitialState()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;//只需要记录当前的 &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{curr:&nbsp;0}&nbsp; &nbsp;&nbsp;}, &nbsp;&nbsp;shouldComponentUpdate(nextProps,&nbsp;nextState)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;优化点击已经curr的不需要重新render &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;!(nextState.curr&nbsp;===&nbsp;this.state.curr) &nbsp;&nbsp;}, &nbsp;&nbsp;handleClick(i)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;this.setState({curr:&nbsp;i}) &nbsp;&nbsp;}, &nbsp;&nbsp;render:&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;批量生成 &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;( &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{[...Array(this.props.total)].map((x,&nbsp;i)&nbsp;=> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;className={i&nbsp;===&nbsp;this.state.curr&nbsp;?&nbsp;'curr'&nbsp;:&nbsp;''} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onClick={this.handleClick.bind(null,&nbsp;i)}&nbsp;//&nbsp;只需要index，不需要传event &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;key={i} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{i&nbsp;===&nbsp;this.state.curr&nbsp;?&nbsp;'curr'&nbsp;:&nbsp;'not&nbsp;curr'} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;) &nbsp;&nbsp;} }) ReactDOM.render( &nbsp;&nbsp;<Hello&nbsp;total={5}&nbsp;/>, &nbsp;&nbsp;document.getElementById('container') )