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>

 

标签：isLogin,显示,判断,React,state,vue,条件,true,隐藏
来源： https://www.cnblogs.com/lpx520/p/15751900.html