React：如何在重新安装后保持手风琴入口扩大

Question

我有一个由多个<EndpointList />组件组成的手风琴风格<Endpoint />组件。每个<Endpoint />都有一个最初隐藏的参数部分，当用户点击该端点的标题时，该部分会展开。

我的目标是，当展开<Endpoint />并且用户导航到其他某个视图，然后返回到包含端点列表的视图时，之前展开的<Endpoint />应该仍然是扩大。也就是说，即使整个<EndpointList />已卸载并在此期间重新安装，其参数部分仍应可见。

每个端点都有一个布尔expanded标志，指示其参数当前是否已扩展。我通过将<Endpoint />和<EndpointList />组件中的这些标志移动到我永远不会重新装入的顶级组件中来实现我的目标。但是，这引入了以下新问题：

1. 如果我正确理解React，那么无论何时展开或折叠端点，现在都会重新呈现整个<EndpointList />，因为这会更改我的顶级组件的状态，该状态会传递给{{1 }}。正确？ （在包含大量端点的列表中扩展端点时存在明显的延迟）
2. 在我的应用程序中，单个端点可能包含在多个<EndpointList />组件中。使用我当前的方法，当端点扩展时，它会在应用程序中的任何位置进行扩展，而不仅仅是在实际单击其标头的<EndpointList />实例中。我显然不想要这种行为。

所以我的问题是：

• 维护端点<EndpointList />状态的好方法是什么，并且在重新显示显示端点的组件时不会丢失它？

• 如果在组件层次结构中移动expanded状态（正如我所做的那样）是实现此目的的最佳（或唯一）方法，我该如何摆脱上述问题？< / p>

提前致谢！

更新：我创建了一个JSFiddle来说明问题：https://jsfiddle.net/7shLogek/2。实际上，您可以在浏览器控制台中看到，每当端点展开或折叠时，每个端点列表都会重新呈现。此外，端点显然总是在两个列表中同时展开/折叠。

更新2 ：我通过实施expanded并使用Facebook's Shallow Compare Addon解决了性能问题（1.），以便只重新呈现实际更改的那些端点。

Answer 1

一些快速提示：

• 1：如果你不能足够重新安装，请尝试隐藏和 如果可能，显示根组件，而不是重新安装。
• 2：我注意到你为每个列表输入了相同的状态 可能需要为EndpointList创建一个状态集合 （就像你拥有this.state.endpoints一样）拥有个性 每个清单的行为。