在条件渲染或隐藏组件之间进行选择的事实上的方法是{ display: 'none' }什么？
为了便于讨论，让我们说，我有一个FilterComponent保存的title过滤器，和清单FilterItems，以name和amount。
简而言之，aFilterComponent可能是：
颜色
蓝色 (19)
黄色 (17)
橙色 (3)
黑色 (7)
绿色 (10)
+ Show More
当点击Show More按钮时，FilterItem会显示更多的s，即
颜色
蓝色 (19)
黄色 (17)
橙色 (3)
黑色 (7)
绿色 (10)
棕色 (17)
粉红色 (88)
白色 (55)
红色 (32)
紫色 (17)
- Show Less
我应该隐藏FilterItems 下方的 sShow More吗？或者我应该为下面的那些返回 null 并在更新状态后呈现它们Show More？
我认为有几种方法可以完成您的需求。然而，这似乎是最常用的：
{myConditionIsTrue && <MyComponent />}
在您的情况下，使用状态是有意义的。我会在 FilterComponent 里面有一个props叫做showFullList
{this.state.showFullList && (
<React.Fragment>
<All/><The/><Other/><Components/>
</React.Fragment>)}
只是有点累，这个机制实际上是删除/添加到 DOM。
通常在 React 中，不渲染某些东西比将其渲染为隐藏更好。这是一个相关的讨论：https : //discuss.reactjs.org/t/conditional-rendering-or-toggling-hidden-classes/2535/6
我会采用“更新状态”方法。这样，您始终可以在状态中显示实际的 filterItems。所以你的组件状态是同步的并且代表当前显示的 UI。
猜猜这个问题没有对或错=）
在单击 Show More 并且状态已更新之前，不渲染不应显示的项目会更有意义。通过这种方式，您可以在单击 之前处理默认情况下应显示的项目数量Show More。通过这种方式，您可以对 all 使用完全相同的逻辑，而不是对某些元素应用内联样式或特殊类FilterItems，但只渲染X它们。