首頁  >  文章  >  web前端  >  react如何控制顯示與隱藏

react如何控制顯示與隱藏

coldplay.xixi
coldplay.xixi原創
2020-12-02 16:34:407743瀏覽

react控制顯示與隱藏的方法:1、透過state變數來控制是否渲染元素;2、透過style控制display屬性;3、透過動態切換className。

react如何控制顯示與隱藏

本教學操作環境: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:&#39;none&#39;
        }
    }
    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?&#39;old&#39;:&#39;old is-show&#39;}>显示的元素</div>
              // 写法二
              <div className={`${this.state.isShow?&#39;&#39;:&#39;is-show&#39;} old`}>显示的元素</div>
            </div>
        )
    }
}

相關免費學習推薦:javascript(影片)

以上是react如何控制顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn