React控制元素顯示隱藏的三種方法

React控制元素顯示和隱藏的方法目前我知道的有三種方法:
第一種是通過state變量來控制是否渲染元素,類似vue中的v-if
第二種是通過style控制display屬性,類似vue 中的v-show
第三種是通過動態切換className

方法一:

第一種方法是通過此例中showElem變量來控制是否加載元素的,如果showElemfalse,內容是直接不會渲染的。

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>
        )
    }
}
方法三:

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

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {/* 寫法一 */}
                <div className={this.state.showElem?'word-style':'word-style hide'}>顯示的元素</div>
                {/* 寫法二 */}
                <div className={`${this.state.showElem?'':'hide'} word-style`}>顯示的元素</div>
            </div>
        )
    }
}

要注意的是,這幾種方法也有使用的區別:

  • 方法一不適合頻繁控制顯示隱藏的情況,因為他會重新渲染元素,比較耗費性能。在這種情況下,第二種或者第三種通過display來控制會更合理。
  • 方法一適合安全性高的頁面,比如用戶信息頁面,根據不同的用戶級別顯示不一樣的內容,這時候如果你用方法一或者方法二的話,用戶如果打開network還是可以看見,因為頁面還是渲染了,只是隱藏了而已。而方法一是直接不渲染用戶信息的DOM元素,保證了安全性。
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 前端開發面試題 面試題目: 根據你的等級和職位的變化,入門級到專家級,廣度和深度都會有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,606評論 0 7
  • 前端開發知識點 HTML&CSS對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功:布局、盒子模型...
    Hebborn_hb閱讀 851評論 0 1
  • 概要 64學時 3.5學分 章節安排 電子商務網站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,286評論 0 3
  • 一:在制作一個Web應用或Web站點的過程中,你是如何考慮他的UI、安全性、高性能、SEO、可維護性以及技術因素的...
    Arno_z閱讀 1,212評論 0 1
  • 這個叫做《天荒志》的系列是一個短篇小說集,預計是要把一些不會單獨拿出來寫中長篇的部分,用簡短的篇幅寫出來。有的出...
    蕭寒淺閱讀 189評論 0 1