实现方法：1、通过state变量来控制是否渲染元素，如果值为false则内容是直接不会渲染的；2、通过style控制display属性，当属性值为none时隐藏元素；3、通过className动态切换hide来实现元素的显示和隐藏。
本教程操作环境：Windows7系统、react18版、Dell G3电脑。
React控制元素显示和隐藏的方法有三种方法：
第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。
第二种是通过style控制display属性，类似vue 中的v-show。
第三种是通过动态切换className。
方法一：
第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。
class Demo extends React.Component{ constructor(props){ super(props); this.state = { showElem:true } } render(){ return ( { this.state.showElem?( 显示的元素 ):null } ) }}
登录后复制
方法二：
这个方法很简单，就是通过display属性来控制元素显示和隐藏。
class Demo extends React.Component{ constructor(props){ super(props); this.state = { showElem:'none' } } render(){ return ( 显示的元素 ) }}
登录后复制
方法三：
通过className切换hide来实现元素的显示和隐藏。
class Demo extends React.Component{ constructor(props){ super(props); this.state = { showElem:true } } render(){ return ( {/* 写法一 */} 显示的元素 {/* 写法二 */} 显示的元素 ) }}
登录后复制
方法一不适合频繁控制显示隐藏的情况，因为他会重新渲染元素，比较耗费性能。在这种情况下，第二种或者第三种通过display来控制会更合理。
方法一适合安全性高的页面，比如用户信息页面，根据不同的用户级别显示不一样的内容，这时候如果你用方法一或者方法二的话，用户如果打开network还是可以看见，因为页面还是渲染了，只是隐藏了而已。而方法一是直接不渲染用户信息的DOM元素，保证了安全性。
【相关推荐：Redis视频教程、编程教学】
以上就是react怎么根据条件隐藏元素的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2923308.html
