react怎么显示隐藏

react显示隐藏的方法：1、通过state变量来控制是否渲染元素，类似vue中的【v-if】；2、通过style控制display属性，类似vue中的【v-show】；3、通过动态切换classname。
react显示隐藏的方法：
方法一：
第一种方法是通过此例中showelem变量来控制是否加载元素的，如果showelem为false，内容是直接不会渲染的。
class demo extends react.component{ constructor(props){ super(props); this.state = { showelem:true } } render(){ return ( <div> { this.state.showelem?( <div>显示的元素</div> ):null } </div> ) }}方法二：
这个方法很简单，就是通过display属性来控制元素显示和隐藏。
class demo extends react.component{ constructor(props){ super(props); this.state = { showelem:'none' } } render(){ return ( <div style={{display:this.state.showelem}}>显示的元素</div> ) }}方法三：
通过classname切换hide来实现元素的显示和隐藏。
class demo extends react.component{ constructor(props){ super(props); this.state = { showelem:true } } render(){ return ( <div> {/* 写法一 */} <div classname={this.state.showelem?'word-style':'word-style hide'}>显示的元素</div> {/* 写法二 */} <div classname={`${this.state.showelem?'':'hide'} word-style`}>显示的元素</div> </div> ) }}要注意的是，这几种方法也有使用的区别：
方法一不适合频繁控制显示隐藏的情况，因为他会重新渲染元素，比较耗费性能。在这种情况下，第二种或者第三种通过display来控制会更合理。
方法一适合安全性高的页面，比如用户信息页面，根据不同的用户级别显示不一样的内容，这时候如果你用方法一或者方法二的话，用户如果打开network还是可以看见，因为页面还是渲染了，只是隐藏了而已。而方法一是直接不渲染用户信息的dom元素，保证了安全性。
相关免费学习推荐：javascript（视频）

云服务器租用亚马逊
优刻得云服务器配置
服务器网络不通-虚拟主机/数据库问题
常见的两类程序设计语言处理程序是什么
阿里云服务器ecs转移停止
这个站打不开帮我看下谢谢
上传文件受限-虚拟主机/数据库问题
云服务器香港租用价格