react如何显示隐藏

小编给大家分享一下react如何显示隐藏，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司专注于赣县网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供赣县营销型网站建设，赣县网站制作、赣县网页设计、赣县网站官网定制、微信平台小程序开发服务，打造赣县网络公司原创品牌,更为您提供赣县网站排名全网营销落地服务。

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

react显示隐藏的方法：

方法一：

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

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            

                {
                    this.state.showElem?(
                        
显示的元素
                    ):null
                }
            
        )
    }
}

方法二：

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

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

方法三：

通过className切换hide来实现元素的显示和隐藏。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            

                {/* 写法一 */}
                
显示的元素
                {/* 写法二 */}
                
显示的元素
            
        )
    }
}

要注意的是，这几种方法也有使用的区别：

• 方法一不适合频繁控制显示隐藏的情况，因为他会重新渲染元素，比较耗费性能。在这种情况下，第二种或者第三种通过display来控制会更合理。

• 方法一适合安全性高的页面，比如用户信息页面，根据不同的用户级别显示不一样的内容，这时候如果你用方法一或者方法二的话，用户如果打开network还是可以看见，因为页面还是渲染了，只是隐藏了而已。而方法一是直接不渲染用户信息的DOM元素，保证了安全性。

以上是react如何显示隐藏的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！