首先,在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>