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

深碍√TFBOYSˉ_ 2022-12-13 01:40 339阅读 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 (

\{/\* 写法一 */\}  
<div className=\{this.state.showElem?‘word-style’:‘word-style hide’\}>显示的元素*

\{/ 写法二 \*/\}  
<div className=\{ `${this.state.showElem?'':'hide'} word-style`\}>显示的元素  
  
)  
\}  
\}  
*区别：*  
方法一不适合频繁控制显示隐藏的情况，因为他会重新渲染元素，比较耗费性能。在这种情况下，第二种或者第三种通过display来控制会更合理。  
方法一适合安全性高的页面，比如用户信息页面

发表评论取消回复

表情：

评论列表（有 0 条评论，339人围观）

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

相关阅读

相关 js控制元素隐藏和显示

方法一： document.querySelector("id").style.visibility="hidden"; document.quer

爱被打了一巴掌/ 2023年06月08日 15:53/ 0 赞/ 52 阅读

相关 uniapp控制data字段来控制元素显示隐藏

今天遇到了一个界面的数据是一个json数据实现的动态绑定，里面有对应的字符串绑定或者数组遍历，但是其的状态是根据data中的数据是否为空来控制”完成“和”未完成“的显示状态的。

绝地灬酷狼/ 2023年01月16日 03:21/ 0 赞/ 235 阅读

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

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

深碍√TFBOYSˉ_/ 2022年12月13日 01:40/ 0 赞/ 340 阅读

相关 react点击实现元素的显示和隐藏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

落日映苍穹つ/ 2022年11月29日 12:21/ 0 赞/ 199 阅读

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

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

川长思鸟来/ 2022年09月24日 05:14/ 0 赞/ 393 阅读

相关隐藏html元素的方式

1. display: none; 2. visibility: hidden; 3. opacity: 0;//使元素透明 4. positi

蔚落/ 2022年06月05日 06:18/ 0 赞/ 239 阅读

相关如何控制元素显示、隐藏？

http://www.w3school.com.cn/jquery/jquery\_hide\_show.asp ![70][] [70]: /images/2022053

￡神魔★判官ぃ/ 2022年05月30日 05:52/ 0 赞/ 427 阅读

相关 js_元素的隐藏与显示

1. 隐藏显示 display:none visibility:hidden 都是隐藏的意思，但是前者相当于从html中去掉了标签，而后者只是不显示，但是还是占着相应的位

深藏阁楼爱情的钟/ 2022年05月25日 05:44/ 0 赞/ 261 阅读

相关控制HTML元素的显示与隐藏——display和visibility

</head> <body> <div>display：元素的位置不被占用</div> <div id="div1" style="display:block;">DIV

╰+攻爆jí腚メ/ 2022年05月08日 08:04/ 0 赞/ 287 阅读

相关 jquery判断元素是否是隐藏的(隐藏的显示,显示的隐藏)

if(node.is(':hidden')){　　//如果node是隐藏的则显示node元素，否则隐藏　　node.show();　 }else{

梦里梦外;/ 2022年03月25日 05:51/ 0 赞/ 350 阅读