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 ({ 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元素,保证了安全性。
相关免费学习推荐:JavaScript(视频)
分享标题:react怎么显示隐藏
标题链接:http://scyanting.com/article/cjsigp.html