从子组件收集数据

Question

对于我的第一个React应用程序，我需要显示带有组项目，读取项目和写入项目的菜单层次结构（还有更多，但对于此示例来说就足够了）。

每个读取项目和写入项目都连接到JSON API中的数据点：每个项目都有一个资源（例如/api/1.0/fruits）和一个json路径（例如data.color）。

当显示菜单时，应从Web服务中提取所有值。但我不希望每个项目都独立取值，因为在典型情况下，相同的资源将被多次读取。

我有一个静态的，无状态的菜单结构以及视图的构建。我可以在这个菜单结构的根菜单项上调用一个方法getRequiredResources()，它将返回一组资源。

但后来我引入了动态菜单项，所以根据菜单项的状态需要不同的资源。我不能再使用静态菜单结构来收集所有需要的资源，因为它不了解每个项目的状态。

有关如何处理此问题的任何提示？如果我可以访问子菜单项组件，它们拥有足够的状态以返回所需资源的列表，但我不认为这是推荐的模式...？

我使用Flux体系结构进行数据流。

Answer 1

在组件树中维护状态尽可能高是一种很好的做法。你的情况最好的解决方案取决于菜单结构的动态条件，来源：

• 如果这些动态条件来自外界（比如他们是否没有用户登录）：
  • 将状态置于顶层菜单组件中，包括有关其子组件状态的所有信息。
  • 然后顶层组件仍然可以获取所有数据并呈现动态菜单。
  • 这保持您只需取一次菜单数据的要求。
  • 为此，您需要维护商店某处的菜单状态信息，以传递到顶层组件。
• 如果动态条件从菜单项内（比如他们复选框或过滤器里面的菜单子项）
  • 给孩子组件的状态，让每个孩子取自己的东西基于在那个状态。 （从加载状态开始，获取项目并重新渲染）。
  • 在这种情况下，您可能会获取相同的数据两次（因为孩子之间没有交流。
• 如果动态条件从菜单中组件和你数据集不是过大或过于复杂的（听起来像这样不符合你的需求）来源：
  • 你可以仍然可以获取顶部的所有内容，并且仅在儿童内部使用状态进行过滤。
• 如果动态条件从菜单内起源，但你要保存状态的地方（例如，当用户再次访问页）：
  • 然后保持状态在顶部的组件，以及像所有动态的孩子一样。
  • 孩子们都是无国籍的，他们都是道具。
  • 只要在孩子的内部设置过滤器或类似设置，该孩子就会向调度员发出一个动作。然后您需要在商店的某个地方保存您的过滤条件。