在React.js中隐藏组件的正确方法

Question

假设您正在将名为show的道具传递给组件。如果prop值为true，则应正常呈现完整组件。如果是假，则不应显示任何内容。

你可以这两种方式。

1. 在组件的render方法中返回null。
2. 将包含display: none属性的CSS类应用于组件的DOM元素。

哪些是正确的或首选的方式？

Answer 1

我认为这个问题没有明确的答案。 每种方法都有其优点和缺点。

使用CSS，你有：

• 它可能会更快地运作
• 如果再次显示控件，则无需考虑恢复子控制状态。

返回null：

• 渲染的DOM总量可能要小得多。如果您有许多可能隐藏的组件，这一点很重要。
• 渲染的html中不会发生碰撞。让我们说你有表格视图。每个选项卡都有自己的复杂形式，包含许多子控件。如果你有一些原始的javascript / jquery /使用它们的id / classnames等等 - 很难确保每个tab / form都有唯一的id，除非你不渲染它们。

从我的观点来看，决定将基于你的控制结构。如果它具有复杂的结构，有许多嵌套的子节点，并且你没有任何方法在再次打开时恢复它们的状态 - 请使用CSS，但我会说这只是一个非常简单的控件的短期解决方案。在所有其他情况下，我将不使用渲染组件。

Answer 2

如果您认为在页面生命期间需要再次显示该组件，那么我建议使用css方式，因为在这种情况下对DOM操作的影响会更小。在其他一些情况下，可能返回null会更有帮助。

Answer 3

在大多数情况下，您的两种解决方案是可以互换的。他们都“工作”很好。

我会警告不要先选择优先选择哪种方法进行优先选择。如果你确实需要最终修改你的代码并尝试其他方法，这是一个荒谬的简单交换，不应该是一个障碍。所以不要担心它，直到有理由担心它。

Answer 4

我是 OP。

如果组件根据屏幕大小隐藏，CSS 媒体查询和 display: none 效果最好，如果应用使用 react-snap 之类的东西预渲染。这是因为，如果预渲染设备和查看设备不匹配，如果组件隐藏逻辑在 JS 中，则应用重新水化时布局会发生变化。

与此相关，我们需要注意，即使组件没有用 CSS display: none“显示”，组件仍然存在，如果有效果，它们仍然会触发。