是否有最佳实践从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遍历每个孩子并读取道具,如下所示：

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,则会遇到&lt ; Wizard.Step />组件更新和< Wizard />组件不知道发生了这种事情.

推荐的做法是什么？我能想到一对可行的方法(例如：让< Wizard.Heading />建立步骤列表,然后让< Wizard />仅从标题建立步骤列表),但我不确定使用哪种方法会落在打算使用React的范围之内.

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

解决方法:

由于这是一个关于ReactJS编程范例的问题,因此我不会在此处粘贴代码.但是一般的想法是这样的：

道具用于通过组件层次结构向下传递数据,功能用于向上传递数据.因此,如果您想获取有关子组件的一些元数据,而又不知道子组件可以采用什么形式,则需要将一个函数传递给它们,以访问您父母的状态.

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

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