React控制元素显示隐藏的方式

深碍√TFBOYSˉ_ 2022-12-13 01:40 398阅读 0赞

React控制元素显示和隐藏的方法如下：
第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。
第二种是通过style控制display属性，类似vue 中的v-show。
第三种是通过动态切换className。

方法一：
第一种方法是通过此例中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来控制会更合理。
方法一适合安全性高的页面，比如用户信息页面

发表评论

表情：
评论列表 （有 0 条评论，398人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JQuery 控制html元素显示或隐藏

            在做项目中用到界面元素显示或隐藏的功能。比如：点击编辑按钮，切换复选框的显示隐藏。根据数据库中某一字段的不同值，在界面上显示不同的按钮组合。因此查找了如何控制界

    川长思鸟来川长思鸟来/ 0 赞/ 442 阅读