react控制显示与隐藏的方法：1、通过state变量来控制是否渲染元素；2、通过style控制display属性；3、通过动态切换className。
本教程操作环境：windows7系统、React17版，Dell G3电脑。
react控制显示与隐藏的方法：
1、通过 state 变量来控制是否渲染元素
类似于 vue 的 v-if
方法是通过变量来控制是否加载元素的，如果变量为false，内容就直接不会渲染的。
class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:true } } render(){ return ( { this.state.isShow?( 显示的元素 ):null } ) }}
登录后复制
2、通过 style控制 display 属性
类似于 vue 中的 v-show
通过 display 属性来控制元素显示与隐藏
class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:'none' } } render(){ return ( 显示的元素 ) }}
登录后复制
3、通过动态切换className
通过className切换类名来实现元素的显示和隐藏。
//.css文件.is-show{ display:none}//.js文件class Demo extends React.Component{ constructor(props){ super(props); this.state = { isShow:true } } render(){ return ( // 写法一 显示的元素 // 写法二 显示的元素 ) }}
登录后复制
相关免费学习推荐：javascript（视频）
以上就是react如何控制显示与隐藏的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2721194.html
