react如何控制显示与隐藏-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

react控制显示与隐藏的方法：1、通过state变量来控制是否渲染元素；2、通过style控制display属性；3、通过动态切换className。

本教程操作环境：windows7系统、React17版，Dell G3电脑。

react控制显示与隐藏的方法：

1、通过 state 变量来控制是否渲染元素

类似于 vue 的 v-if

方法是通过变量来控制是否加载元素的，如果变量为false，内容就直接不会渲染的。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
    }
    render(){
        return (
            <div>
                {
                    this.state.isShow?(
                        <div>显示的元素</div>
                    ):null
                }
            </div>
        )
    }
}

2、通过 style控制 display 属性

类似于 vue 中的 v-show

通过 display 属性来控制元素显示与隐藏

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:'none'
        }
    }
    render(){
        return (
            <div style={{display:this.state.isShow}}>显示的元素</div>
        )
    }
}