react显示隐藏组件的方法_react控制元素显示隐藏的3种方式

在 vue 中&＃xff0c;元素的显示隐藏可以通过 指令 v-if 和 v-show 来控制。

v-if&＃xff1a;适用于只渲染一遍的元素&＃xff0c;或者此元素需要更新的&＃xff0c;因为重新渲染 DOM 元素&＃xff0c;会比较消耗性能。

v-show&＃xff1a;适用于对元素进行频繁操作显示与隐藏的元素

然而&＃xff0c;在 react中并没有如此方便的指令&＃xff0c;react的显示与隐藏可以通过以下的3种方式来实现。

1、方法1

通过变量 showElem 的值 为 true or false 来控制元素是否渲染&＃xff0c;为 true 则渲染&＃xff0c;否则不渲染。

2、方法2

通过行内样式 display 为 block 或 none 来控制显示和隐藏

3、方法3

其实&＃xff0c;方法3和方法2原理是相同的&＃xff0c;都是通过样式display 为 block 或 none 来控制显示和隐藏&＃xff0c;只不过&＃xff0c;方法3是将样式写在类里面&＃xff0c;然后通过是否返回这个类名来控制显示与隐藏。

.hide { display: none;} // 样式写在样式文件里即可