React 条件判断

首先,在state中定义一个属性,设置它的布尔值

this.state={
            isLogin:true
        }

方案一:直接在标签中判断

<h2 >{this.state.isLogin?'显示':'隐藏'}</h2>

方案二:通过逻辑与来显示或隐藏  ,逻辑与:一个条件不允许,后面的条件都不判断了

<h2 >{this.state.isLogin && '你好啊,coderwhy'}</h2>

以上的显示和隐藏,是和vue中v-if类似。让元素在dom中销毁或生成,使用多次消耗性能。

下面方法是和vue中v-show类似。改变元素的display属性。

this.state={
            isLogin:true
        }
<h2 style={{display:this.state.isLogin?'block':'none'}}>显示或隐藏</h2>

 

上一篇:uniapp——商城购物车联动效果


下一篇:【LeetCode】292. Nim 游戏 博弈论问题