react如何根据条件隐藏元素

本文小编为大家详细介绍“react如何根据条件隐藏元素”，内容详细，步骤清晰，细节处理妥当，希望这篇“react如何根据条件隐藏元素”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 实现方法：1、通过state变量来控制是否渲染元素，如果值为false则内容是直接不会渲染的；2、通过style控制display属性，当属性值为none时隐藏元素；3、通过className动态切换hide来实现元素的显示和隐藏。React控制元素显示和隐藏的方法有三种方法：第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。第二种是通过style控制display属性，类似vue 中的v-show。第三种是通免费云主机、域名过动态切换className。第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。

classDemoextendsReact.Component{
constructor(props){
super(props);
this.state={
showElem:true
}
}
render(){
return(

{
this.state.showElem?(
显示的元素
):null
}

)
}
}

这个方法很简单，就是通过display属性来控制元素显示和隐藏。

classDemoextendsReact.Component{
constructor(props){
super(props);
this.state={
showElem:'none'
}
}
render(){
return(
显示的元素
)
}
}

通过className切换hide来实现元素的显示和隐藏。

classDemoextendsReact.Component{
constructor(props){
super(props);
this.state={
showElem:true
}
}
render(){
return(

{/*写法一*/}
显示的元素
{/*写法二*/}
显示的元素

)
}
}

方法一不适合频繁控制显示隐藏的情况，因为他会重新渲染元素，比较耗费性能。在这种情况下，第二种或者第三种通过display来控制会更合理。方法一适合安全性高的页面，比如用户信息页面，根据不同的用户级别显示不一样的内容，这时候如果你用方法一或者方法二的话，用户如果打开network还是可以看见，因为页面还是渲染了，只是隐藏了而已。而方法一是直接不渲染用户信息的DOM元素，保证了安全性。读到这里，这篇“react如何根据条件隐藏元素”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。

相关推荐: 如何使用纯CSS实现鼠标点击拖拽效果

这篇文章主要介绍“如何使用纯CSS实现鼠标点击拖拽效果”，在日常操作中，相信很多人在如何使用纯CSS实现鼠标点击拖拽效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何使用纯CSS实现鼠标点击拖拽效果”的疑惑有所帮助！接下来，…