Javascript 从子组件的数量/类型/道具中提取父组件配置

是否有一种最佳实践方法可以从React中的子组件派生父组件的配置信息？以需要单步执行一些步骤的向导组件为例。您可以想象这样一个组件的API可能是这样的：

第一步
步骤2

在上面的示例中，如果希望向导从步骤1导航到步骤2，向导需要知道它有两个步骤，并且步骤1在步骤2之前。我使用

React.Children.toArray

在每个孩子身上迭代并阅读道具，如下所示：

const steps=React.Children.toArray（Children.map）（child=>{
const{id，title}=child.props；
返回{id，title}；
});

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

第一步
步骤2
第一步
步骤2

我觉得我以前的解决方案在这里失败了。如果您尝试使用前面的方法（使用

React.Children.map

或

React.Children.toArray

）构建步骤列表，以便向导知道步骤2需要转到步骤3，则会遇到

组件更新问题，而

组件不知道发生了这样的事情

推荐的方法是什么？我可以想出一些可能有效的方法（例如：让

建立一个步骤列表，然后让

仅从标题建立一个步骤列表），但我不确定使用哪种方法会在React的预期使用范围内

---

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

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

道具用于向下的数据流，函数用于通过组件继承权向上的数据流。因此，如果您想要一些关于您的子组件的元数据，而不知道您的子组件可以采取什么形式，那么您需要向它们传递一个函数，该函数将访问父组件的状态

我建议编写一个（特别是）包装您的子组件并向它们传递一些额外的函数，这些函数将收集元数据并通过HOC向您的父组件发送元数据

---

另一件需要记住的事情是，这也可以在这个场景中使用，每个孩子都会附加到ComponentDidMount上的上下文，但是上下文有自己的一组，除非必要，否则通常应该避免使用它。

我认为最好的方法是使用单个对象，它表示一个向导和一个组件，该组件呈现向导、它的步骤以及您可能希望显示的任何其他内容（例如标题）

除了向导的配置之外，您还需要为您希望从向导中填充的数据提供位置

您需要考虑向导在不同步骤上应显示的所有内容。输入、文本、图像等

const wizard = {
currentStep = 1,
  data: {
    username: '',
    password: '',
    address: '',
},
steps: [
  {
    title: "Basic info",
    inputs: [
      {name: "Username", type: "text", required},
      {name: "Password", type: "password", required},
      {name: "Address", type: "text", required}
     ],
    }
  ]
}

您将有一个向导，它执行这些步骤，向其中添加一些常用组件（例如添加后退/下一步按钮），并将所有输入数据存储到对象中

<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>

第一步
步骤2

---

这里的错误是您试图同时渲染这两个步骤。不要。只需要有一个向导，它知道这是什么步骤，然后将步骤对象传递给wizardStep组件。向导控制哪一步是可见的，并在状态下跟踪它。

如果这看起来太模糊，我可以用一些例子来说明，但这可能需要一些时间，因为这是一个相当复杂的用例。最后，我从这两个组件中获得灵感，并使用上下文将附加函数向下传递给每个子组件，以便向父组件注册。看来我可以依赖这样一个事实：兄弟组件按照它们在父组件中声明的顺序装载和更新。这太棒了！在别人的帮助下解决了一个复杂的问题，听到这样的话总是很好的。至于依靠安装和更新悬挂部件的顺序，我建议不要这样做。也许现在他们是这样做的，但是一旦你的应用程序变得更大，构造函数或组件中的一些API调用可能会挂载，顺序可能会改变，并导致错误行为。虽然我不确定你是如何使用这些信息的，所以可能我错了，但在使用JavaScript时，在依赖事件/动作的顺序/计时时要小心。是的，我正试图找到一种方法来正确确定兄弟组件的顺序，而且运气不好，但我觉得这是另一个问题。