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 (
            <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>
        )
    }
}

3、通過動態切換className

通過className切換類名來實現元素的顯示和隱藏。

//.css文件
.is-show{
    display:none
}
//.js文件
class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
    }
    render(){
        return (
            <div>
              // 寫法一 
              <div className={this.state.isShow?'old':'old is-show'}>顯示的元素</div>
              // 寫法二
              <div className={`${this.state.isShow?'':'is-show'} old`}>顯示的元素</div>
            </div>
        )
    }
}

以上是“react控制顯示與隱藏的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！