react控制显示与隐藏的方法

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

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

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

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

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

类似于 vue 的 v-if

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

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

2、通过 style控制 display 属性

类似于 vue 中的 v-show

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

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

3、通过动态切换className

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

//.css文件
.is-show{
    display:none
}
//.js文件
class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
    }
    render(){
        return (
            
              // 写法一 
              显示的元素
              // 写法二
              显示的元素
            
        )
    }
}

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

分享名称：react控制显示与隐藏的方法
网页URL：http://shouzuofang.com/article/iggedi.html

网站建设知识

react控制显示与隐藏的方法

其他资讯