小编给大家分享一下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 (
<div>
{
this.state.showElem?(
<div>显示的元素</div>
):null
}
</div>
)
}
}
方法二:
这个方法很简单,就是通过display属性来控制元素显示和隐藏。
class Demo extends React.Component{
constructor(props){
super(props);
this.state = {
showElem:'none'
}
}
render(){
return (
<div style={{display:this.state.showElem}}>显示的元素</div>
)
}
}
方法三:
通过className切换hide来实现元素的显示和隐藏。
class Demo extends React.Component{
constructor(props){
super(props);
this.state = {
showElem:true
}
}
render(){
return (
<div>
{/* 写法一 */}
<div className={this.state.showElem?'word-style':'word-style hide'}>显示的元素</div>
{/* 写法二 */}
<div className={`${this.state.showElem?'':'hide'} word-style`}>显示的元素</div>
</div>
)
}
}
要注意的是,这几种方法也有使用的区别:
方法一不适合频繁控制显示隐藏的情况,因为他会重新渲染元素,比较耗费性能。在这种情况下,第二种或者第三种通过display来控制会更合理。
方法一适合安全性高的页面,比如用户信息页面,根据不同的用户级别显示不一样的内容,这时候如果你用方法一或者方法二的话,用户如果打开network还是可以看见,因为页面还是渲染了,只是隐藏了而已。而方法一是直接不渲染用户信息的DOM元素,保证了安全性。
以上是react如何显示隐藏的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。