react控制显示与隐藏的方法：1、通过state变量来控制是否渲染元素；2、通过style控制display属性；3、通过动态切换className。
本教程操作环境：windows7系统、React17版，该方法适用于所有品牌电脑。
react控制显示与隐藏的方法：
1、通过 state 变量来控制是否渲染元素
类似于 vue 的 v-if
方法是通过变量来控制是否加载元素的，如果变量为false，内容就直接不会渲染的。class Demo extends ponent{
constructor(props){
super(props);
this.state = {
isShow:true
}
}
render(){
return (
{
this.state.isShow?(
显示的元素
):null
}
)
}
}
2、通过 style控制 display 属性
类似于 vue 中的 v-show
通过 display 属性来控制元素显示与隐藏class Demo extends ponent{
constructor(props){
super(props);
this.state = {
isShow:'none'
}
}
render(){
return (
显示的元素
)
}
}
3、通过动态切换className
通过className切换类名来实现元素的显示和隐藏。//.css文件
.is-show{
display:none
}
//.js文件
class Demo extends ponent{
constructor(props){
super(props);
this.state = {
isShow:true
}
}
render(){
return (
// 写法一
显示的元素
// 写法二
显示的元素
)
}
}相关免费学习推荐：javascript(视频)
如果觉得《react实现div隐藏_react如何控制显示与隐藏》对你有帮助，请点赞、收藏，并留下你的观点哦！
