react中控制元素的显示与隐藏

Posted 2023-03-09

参考技术A 最近在做 react 的项目，在此之前，都是做的 vue 项目，所以对于 react 的使用都很不熟练。遇到的第一个问题，怎么控制元素的显示与隐藏，在 vue 中常用 v-if 和 v-show 指令。 react 中用什么方法呢？

下面说我知道的三种方法：

类似于 vue 的 v-if

方法是通过变量来控制是否加载元素的，如果变量为 false ，内容就直接不会渲染的。

类似于 vue 中的 v-show

通过 display 属性来控制元素显示与隐藏

通过 className 切换类名来实现元素的显示和隐藏。

第一种方法不适合频繁控制显示隐藏的情况，因为它会重新渲染元素，比较耗费性能。