reactjs - 在没有引用的情况下通过子级进行 react 循环

Question

假设我有一个像这样渲染的 react 组件:

<Form />

在本例中，在 Form 内，this.props.children 为 undefined。

但是，在 render 内，我有以下内容:

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

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

我想循环遍历渲染中的所有子组件，而不必为每个子组件提供引用。 (如果我给出一个引用，我将能够循环 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 和 bar Inputs

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