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

Question

所以，假设我有一个像这样呈现的反应组件：

<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访问，因为他们不是“孩子”），这不灵活/可重复使用。）

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

这可能吗？

Answer 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和栏Inputs

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