是否有最佳实践方法可以从 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.mapReact.Children.toArray )构建步骤列表,以便向导知道第 2 步需要转到第 3 步,您就会遇到 <Wizard.Step /> 组件更新和 <Wizard /> 组件不知道的问题这样的事情发生了。

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

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

最佳答案

由于这是一个关于 ReactJS 编程范式的问题,我不会在这里粘贴代码。但总体思路是这样的:

Props 用于向下的数据流和用于向上通过组件层次结构的数据流的函数。所以如果你想要一些关于你的子组件的元数据而不知道你的子组件可以采用什么形式,你需要向它们传递一个函数来访问你的父状态。

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

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

关于javascript - 从子组件的数量/类型/ Prop 中提取父组件配置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51125683/

10-12 00:10
查看更多