react顯示隱藏的方法：1、通過state變量來控制是否渲染元素，類似vue中的【v-if】；2、通過style控制display屬性，類似vue中的【v-show】；3、通過動態(tài)切換classname。
react顯示隱藏的方法：
方法一：
第一種方法是通過此例中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來實現(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> ) }}要注意的是，這幾種方法也有使用的區(qū)別：
方法一不適合頻繁控制顯示隱藏的情況，因為他會重新渲染元素，比較耗費性能。在這種情況下，第二種或者第三種通過display來控制會更合理。
方法一適合安全性高的頁面，比如用戶信息頁面，根據(jù)不同的用戶級別顯示不一樣的內容，這時候如果你用方法一或者方法二的話，用戶如果打開network還是可以看見，因為頁面還是渲染了，只是隱藏了而已。而方法一是直接不渲染用戶信息的dom元素，保證了安全性。
相關免費學習推薦：javascript（視頻）