javascript - 从 child 的数量/类型/ Prop 中提取父组件配置

Question

在 React 中，是否有最佳实践方法从父组件的子组件中获取配置信息？以需要逐步完成一些步骤的向导组件为例。您可以想象此类组件的 API 可能如下所示:

<Wizard>
  <Wizard.Step id="step-1" title="It's step 1!">
    Step 1
  </Wizard.Step>
  <Wizard.Step id="step-2" title="It's step 2!">
    Step 2
  </Wizard.Step>
</Wizard>

在上面的示例中，如果您希望向导从第 1 步导航到第 2 步，则向导需要通过某种方式知道它有两个步骤，并且第 1 步在第 2 步之前。我已经使用 React.Children.toArray 得到了一些工作遍历每个 child 并像这样读取 Prop :

const steps = React.Children.toArray(children).map(child => {
  const { id, title } = child.props;
  return { id, title };
});

在组件嵌套的更复杂的情况下，这会分崩离析。在向导组件的示例中，您可能希望将一些步骤分组在同一标题下，如下所示:

<Wizard>
  <Wizard.Heading title="It's steps 1 and 2!">
    <Wizard.Step id="step-1">
      Step 1
    </Wizard.Step>
    <Wizard.Step id="step-2">
      Step 2
    </Wizard.Step>
  </Wizard.Heading>
  <Wizard.Heading title="It's steps 3 and 4!">
    <Wizard.Step id="step-1">
      Step 1
    </Wizard.Step>
    <Wizard.Step id="step-2">
      Step 2
    </Wizard.Step>
  </Wizard.Heading>
</Wizard>

我觉得我以前的解决方案在这里失败了。如果您尝试使用先前的方法(使用 React.Children.map 或 React.Children.toArray )构建步骤列表，以便向导知道第 2 步需要转到第 3 步，那么您会遇到 <Wizard.Step /> 的问题组件更新和 <Wizard />组件不知道这样的事情已经发生。

这样做的推荐方法是什么？我可以想到一些可能有效的方法(即:让 <Wizard.Heading /> 构建步骤列表，然后让 <Wizard /> 仅从标题构建步骤列表)但我不确定使用哪种方法会保持在 React 的预期使用范围内。

或者，这是解决问题的错误方法吗？我是否应该只使用一个大的配置对象来告诉向导它应该如何构建自己？

Answer 1

因为这是一个关于 ReactJS 编程范例的问题，所以我不会在这里粘贴代码。但总体思路是这样的:

Prop 用于通过组件层次结构向下的数据流，而函数用于向上的数据流。因此，如果您想要一些关于您的子组件的元数据，但不知道您的子组件可以采用什么形式，您需要将一个函数传递给它们，以访问您父级的状态。

我建议写一个 HOC (特别是 this )将包装您的子组件并向它们传递一些附加功能，这些功能将收集元数据并将其通过 HOC 发送到您的父组件。

要记住的另一件事是 context ，也可以在这种情况下使用，其中每个 Child 都会附加到 ComponentDidMount 上的上下文，但上下文带有它自己的 issues 集。除非必要，否则通常应避免使用。