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

Question

假设您正在传递一个称为show组件的prop 。如果prop值为true，则应正常渲染整个组件。如果为假，则不应显示任何内容。

您可以通过两种方式执行此操作。

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

哪种方法是正确的或首选的方法？

Answer 1

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

使用CSS，您可以：

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

随着返回null：

• 渲染的DOM总数可能会小得多。如果您有许多这样的组件可能被隐藏，那么这很重要。
• 呈现的html中不会有冲突。假设您有表格视图。每个选项卡都是其自己的复杂形式，带有许多子控件。如果您有一些原始的javascript / jquery /，无论它们的id / classname等如何工作-除非您不渲染它们，否则很难确保每个选项卡/表单都具有唯一的ID。

从我的角度来看，决策将基于您的控件结构。如果它具有许多嵌套子代的复杂结构，而您又没有任何方法可以在再次打开它们时恢复它们的状态，请使用CSS，但是我想这只是针对非常简单的控件的短期解决方案。在所有其他情况下，我将不渲染组件。

Answer 2

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

我警告不要在选择这些方法时进行先发制人的优化。如果您确实需要最终修改代码并尝试其他方法，那么这是一个极其简单的交换，不应该成为障碍。所以在有理由担心之前不要担心。