react控制显示与隐藏的方法
小编给大家分享一下react控制显示与隐藏的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
成都创新互联公司专注于青秀网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供青秀营销型网站建设,青秀网站制作、青秀网页设计、青秀网站官网定制、小程序定制开发服务,打造青秀网络公司原创品牌,更为您提供青秀网站排名全网营销落地服务。
react控制显示与隐藏的方法:1、通过state变量来控制是否渲染元素;2、通过style控制display属性;3、通过动态切换className。
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 (// 写法一) } }显示的元素// 写法二显示的元素
以上是“react控制显示与隐藏的方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前文章:react控制显示与隐藏的方法
网页链接:http://myzitong.com/article/iggedi.html