flutter控制显示隐藏_react 控制元素显示隐藏的3种方式

  • Post author:
  • Post category:其他


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

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

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

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

1、方法1

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

33444f9cd6b937409944704505770857.png

2、方法2

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

22b151f784f8064b064b893db27d749e.png

3、方法3

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

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

16a9affa9b48f94c1ea77c7ea6414418.png