本教程操作環(huán)境：Windows7系統(tǒng)、react18版、Dell G3電腦。
(資料圖)
React控制元素顯示和隱藏的方法有三種方法：
第一種是通過(guò)state變量來(lái)控制是否渲染元素，類似vue中的v-if。
第二種是通過(guò)style控制display屬性，類似vue中的v-show。
第三種是通過(guò)動(dòng)態(tài)切換className。
第一種方法是通過(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> {/* 寫法一 */} <div className={this.state.showElem?"word-style":"word-style hide"}>顯示的元素</div> {/* 寫法二 */} <div className={`${this.state.showElem?"":"hide"} word-style`}>顯示的元素</div> </div> ) }}方法一不適合頻繁控制顯示隱藏的情況，因?yàn)樗麜?huì)重新渲染元素，比較耗費(fèi)性能。在這種情況下，第二種或者第三種通過(guò)display來(lái)控制會(huì)更合理。
方法一適合安全性高的頁(yè)面，比如用戶信息頁(yè)面，根據(jù)不同的用戶級(jí)別顯示不一樣的內(nèi)容，這時(shí)候如果你用方法一或者方法二的話，用戶如果打開network還是可以看見，因?yàn)轫?yè)面還是渲染了，只是隱藏了而已。而方法一是直接不渲染用戶信息的DOM元素，保證了安全性。
以上就是react怎么根據(jù)條件隱藏元素的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
關(guān)鍵詞： React
營(yíng)業(yè)執(zhí)照公示信息