反应循环通过没有参考的孩子答案

【问题标题】：React loop through children without ref反应循环通过没有参考的孩子
【发布时间】：2015-08-17 11:22:01
【问题描述】：

假设我有一个这样的反应组件：

<Form />

在这种情况下，Form 内部，this.props.children 是undefined。

但是，在render 中，我有以下内容：

render: function() {
  return (
    <form>
       <input name='foo' />
       <input name='bar' />
    </form>
  )
}

使用ref 关键字可以轻松访问“foo”和“bar”。但是，当我有很多“孩子”（我无法使用 this.props.children 或 React.Children.forEach 访问，因为他们不是“孩子”）时，这不是灵活/可重用的）

我想循环遍历渲染中的所有子组件，而不必为每个子组件提供 ref。（如果我给出一个参考，我将能够循环通过this.refs）

这可能吗？

【问题讨论】：

有什么理由要循环输入吗？
@Harish 当然。我创建的 <Input> 组件具有“有效”状态。我想遍历所有这些以确定表单的状态是否有效。
您是否考虑过将表单状态集中化或将其冒泡到主机组件而不是循环遍历子组件？
@WiredPrairie 是的。让我们考虑一下这种情况下孩子的状态。它是有效的还是无效的。当它改变状态并通知父级时，父级仍然需要知道所有子级的状态才能确定表单是否可以提交。另外，考虑嵌套组件，我需要冒出许多级别或实现通量，我认为这不是最好的方法。我认为最可重用的方式是一种可验证的表单，它可以采用带有有效状态标记的 React 组件。父母递归地检查所有孩子并确定有效性。
React 被设计为单向数据流（事件是一种通知方式）。因此，父母通过孩子循环“多层次”来评估有效性似乎不是最好的 React 模式。您无需实施 Flux 即可拥有集中的数据。例如，您可以传递一个对象，该对象具有一些可用于指示组件有效性的方法。

标签： reactjs

【解决方案1】：

在得到答案之前，先澄清一下术语：这些输入元素是 Form 的 DOM 的一部分；它们不是子组件（至少在 Reactjs 中不是）。

解决问题的一个常见方法是将这些输入元素转换为 React Input 组件，以便您可以使用 this.props.children 访问它们。您将拥有一个包含通用Form 组件和所有Input 组件的“实现”表单。它看起来像这样

<MyForm>
    <GenericForm>
         <Input name='foo' />
         <Input name='bar' />
    </GenericForm>
</MyForm>

在此示例中，GenericForm 可以遍历 this.props.children 以访问 foo 和 bar Inputs

请注意，MyForm 的存在只是为了封装整个表单，并允许您将该特定表单作为单个组件重新使用。我只包含它是因为您的示例将Form 作为一个实体。如果你只是在一个地方使用表单，你真的不需要MyForm。

【讨论】：

所以你是建议有一个中介孩子，哪个角色只养孩子？我认为这听起来像是一个不错的解决方案。让我试一试 =) 至于术语，是的，
故意没有 this.props.children。
如果我的表单要生成它的孩子，我会怎么做？例如。输入 1, 2, 3, ... 的列表有没有办法设置自己的孩子？