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 ( <div> { this.state.isShow?( <div>显示的元素</div> ):null } </div> ) } }
2、透過style控制display 屬性
類似vue 中的v-show
透過display 屬性來控制元素顯示與隱藏
class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:'none' } } render(){ return ( <div style={{display:this.state.isShow}}>显示的元素</div> ) } }
3、透過動態切換className
透過className切換類別名稱來實現元素的顯示與隱藏。
//.css文件 .is-show{ display:none } //.js文件 class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:true } } render(){ return ( <div> // 写法一 <div className={this.state.isShow?'old':'old is-show'}>显示的元素</div> // 写法二 <div className={`${this.state.isShow?'':'is-show'} old`}>显示的元素</div> </div> ) } }
相關免費學習推薦:javascript(影片)
以上是react如何控制顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章!