react控制顯示與隱藏的方法：1、透過state變數來控制是否渲染元素；2、透過style控制display屬性；3、透過動態切換className。
本教學操作環境：windows7系統、React17版，Dell G3電腦。
react控制顯示與隱藏的方法：
1、透過state 變數來控制是否渲染元素
類似vue 的v -if
方法是透過變數來控制是否載入元素的，如果變數為false，內容就直接不會渲染的。
class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:true } } render(){ return ( { this.state.isShow?( 显示的元素 ):null } ) } }
2、透過style控制display 屬性
類似vue 中的v-show
透過display 屬性來控制元素顯示與隱藏
class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:'none' } } render(){ return ( 显示的元素 ) } }
3、透過動態切換className
透過className切換類別名稱來實現元素的顯示與隱藏。
//.css文件 .is-show{ display:none } //.js文件 class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:true } } render(){ return ( // 写法一 显示的元素 // 写法二 显示的元素 ) } }
相關免費學習推薦：javascript（影片）
以上是react如何控制顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！
