javascript - React初学者操作class的疑惑?
本文介绍了javascript - React初学者操作class的疑惑?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
就是简单的切换class,多个元素,点击哪个就给哪个添加 currclass,其他元素移除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')
)
这篇关于javascript - React初学者操作class的疑惑?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文