react实现toggle效果

最新推荐文章于 2024-06-22 09:46:06 发布

javascript_panjialin

最新推荐文章于 2024-06-22 09:46:06 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/javascript_panjialin/article/details/53739297

本文介绍了在React中如何实现toggle效果。通过getInitialState设置初始状态，并利用this.setState方法动态修改状态，每次状态变更时都会触发组件重新渲染，以此达到切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var Divider =React.createClass({
getInitialState:function(){
return {props:true}
},
handleClick:function(){
this.setState({props:!this.state.props})
console.log(this.state.props)

},
render:function(){
var classString = 'content' + (this.state.props ? ' bg-red' : ' bg-green');
return (
<div>
<h2 className={classString}>{this.props.children}</h2>
<button onClick={this.handleClick}>点击变色</button>

</div>

)

}

})

ReactDOM.render(
// <WebSite name="11111" site="123456" />,

<Divider>Jasper</Divider>,

// <h1>jasper</h1>,
document.getElementById('root')

);

开始直接写在点击时间里没有使用setState，这时虽然点击后能来回实现props的值来回切换，但是并不能传入render中

getInitialState 用来定义初始化状态，也就是一个对象，这个对象可以通过 this.state 属性读取。

this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

所以再用这个属性改变值可以动态渲染组件

从而实现toggle效果