react控制显示与隐藏的方法：1、通过state变量来控制是否渲染元素；2、通过style控制display属性；3、通过动态切换className。

1、通过 state 变量来控制是否渲染元素

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

相关免费学习推荐：（视频）

类似于 vue 的 v-if

通过className切换类名来实现元素的显示和隐藏。

类似于 vue 中的 v-show

react控制显示与隐藏的方法：

本教程操作环境：windows7系统、React17版，该方法适用于所有品牌电脑。

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 属性

方法是通过变量来控制是否加载元素的，如果变量为false，内容就直接不会渲染的。

通过 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