react怎么显示隐藏-木庄网络博客

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

react显示隐藏的方法：1、通过state变量来控制是否渲染元素，类似vue中的【v-if】；2、通过style控制display属性，类似vue中的【v-show】；3、通过动态切换className。

本教程操作环境：windows10系统、react16，本文适用于所有品牌的电脑。

react显示隐藏的方法：

方法一：

第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。

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

方法二：

这个方法很简单，就是通过display属性来控制元素显示和隐藏。

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