react要怎麼根據條件隱藏元素

實作方法：1、透過state變數來控制是否渲染元素，如果值為false則內容是直接不會渲染的；2、透過style控制display屬性，當屬性值為none時隱藏元素； 3.透過className動態切換hide來實現元素的顯示和隱藏。

本教學操作環境：Windows7系統、react18版、Dell G3電腦。

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

• 第一個是透過state變數來控制是否渲染元素，類似vue中的v-if。

• 第二種是透過style控制display屬性，類似vue 中的v-show 。

• 第三種是透過動態切換className。

方法一：

第一種方法是透過此範例中showElem變數來控制是否載入元素的，如果showElem為false，內容是直接不會渲染的。

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?&#39;word-style&#39;:&#39;word-style hide&#39;}>显示的元素</div>
                {/* 写法二 */}
                <div className={`${this.state.showElem?&#39;&#39;:&#39;hide&#39;} word-style`}>显示的元素</div>
            </div>
        )
    }
}

方法一不適合頻繁控制顯示隱藏的情況，因為他會重新渲染元素，比較耗費效能。在這種情況下，第二種或第三種透過display來控制會更合理。

方法一適合安全性高的頁面，例如使用者資訊頁面，依照不同的使用者層級顯示不一樣的內容，這時候如果你用方法一或方法二的話，使用者如果開啟network還是可以看見，因為頁面還是渲染了，只是隱藏了而已。而方法一是直接不渲染使用者資訊的DOM元素，確保了安全性。

【相關推薦：Redis影片教學、程式設計教學】

以上是react要怎麼根據條件隱藏元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！