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> ) } } 

第一種方法不適合頻繁控制顯示隱藏的情況，因為它會重新渲染元素，比較耗費性能。