ReactJs - 条件渲染或隐藏组件

Question

在条件渲染或使用 { display: 'none' } 隐藏组件之间进行选择的实际方法是什么？

为了便于讨论，假设我有一个 FilterComponent，它保存过滤器的 title 和一个 FilterItems 列表，带有名称和金额。

简而言之，FilterComponent 可以是:

颜色

• 蓝色 (19)

• 黄色 (17)

• 橙色 (3)

• 黑色 (7)

• 绿色 (10)

  + 显示更多

当点击Show More按钮时，将显示更多FilterItem，即

颜色

• 蓝色 (19)

• 黄色 (17)

• 橙色 (3)

• 黑色 (7)

• 绿色 (10)

• 棕色 (17)

• 粉色 (88)

• 白色 (55)

• 红色 (32)

• 紫色 (17)

  - 显示较少

我应该隐藏显示更多下方的FilterItem吗？或者我应该为下面的内容返回 null 并在使用 Show More 更新状态后渲染它们？

Answer 1

我认为有几种方法可以实现您的需求。然而，这似乎是最常用的:

{myConditionIsTrue && <MyComponent />}

就您而言，使用状态是有意义的。我会在 FilterComponent 中有一个名为 showFullList

的 Prop

{this.state.showFullList && (
 <React.Fragment>
   <All/><The/><Other/><Components/>
</React.Fragment>)}

请注意，此机制实际上是删除/添加到 DOM。