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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM