react如何顯示隱藏

小編給大家分享一下react如何顯示隱藏，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

react顯示隱藏的方法：1、通過(guò)state變量來(lái)控制是否渲染元素，類(lèi)似vue中的【v-if】；2、通過(guò)style控制display屬性，類(lèi)似vue中的【v-show】；3、通過(guò)動(dòng)態(tài)切換className。

react顯示隱藏的方法：

方法一：

第一種方法是通過(guò)此例中showElem變量來(lái)控制是否加載元素的，如果showElem為false，內(nèi)容是直接不會(huì)渲染的。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {
                    this.state.showElem?(
                        <div>顯示的元素</div>
                    ):null
                }
            </div>
        )
    }
}

方法二：

這個(gè)方法很簡(jiǎn)單，就是通過(guò)display屬性來(lái)控制元素顯示和隱藏。

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:'none'
        }
    }
    render(){
        return (
            <div style={{display:this.state.showElem}}>顯示的元素</div>
        )
    }
}

方法三：

通過(guò)className切換hide來(lái)實(shí)現(xiàn)元素的顯示和隱藏。

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

要注意的是，這幾種方法也有使用的區(qū)別：

• 方法一不適合頻繁控制顯示隱藏的情況，因?yàn)樗麜?huì)重新渲染元素，比較耗費(fèi)性能。在這種情況下，第二種或者第三種通過(guò)display來(lái)控制會(huì)更合理。

• 方法一適合安全性高的頁(yè)面，比如用戶信息頁(yè)面，根據(jù)不同的用戶級(jí)別顯示不一樣的內(nèi)容，這時(shí)候如果你用方法一或者方法二的話，用戶如果打開(kāi)network還是可以看見(jiàn)，因?yàn)轫?yè)面還是渲染了，只是隱藏了而已。而方法一是直接不渲染用戶信息的DOM元素，保證了安全性。

以上是react如何顯示隱藏的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！