就是简单的切换class,多个元素,点击哪个就给哪个添加 “curr”class,其他元素移除“curr”,
//jQuery 如下
$("el").addClass("curr").siblings().removeClass("curr")
React 中怎么写呢?下面这个方法很蠢,不知如何是好?
你写的没有什么问题,但是可以优化一下
点击了已经是curr的div,可以不用重新render
choose-opts里面的重复内容可以批量生成
没有必要记录所有的curr信息,只需要当前的
var Hello = React.createClass({
getInitialState() {
//只需要记录当前的
return {curr: 0}
},
shouldComponentUpdate(nextProps, nextState) {
// 优化点击已经curr的不需要重新render
return !(nextState.curr === this.state.curr)
},
handleClick(i) {
this.setState({curr: i})
},
render: function() {
// 批量生成
return (
<div>
{[...Array(this.props.total)].map((x, i) =>
<div
className={i === this.state.curr ? 'curr' : ''}
onClick={this.handleClick.bind(null, i)} // 只需要index,不需要传event
key={i}
>
{i === this.state.curr ? 'curr' : 'not curr'}
</div>
)}
</div>
)
}
})
ReactDOM.render(
<Hello total={5} />,
document.getElementById('container')
)