首页 文章

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

提问于
浏览 次
3

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

<Form />

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

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

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

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

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

这可能吗？

reactjs

1 回答

  • 3

    在得到答案之前，有一些术语澄清：那些输入元素是 Form 的DOM的一部分;它们不是子组件（至少不是Reactjs的说法） .

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

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

    在这个例子中， GenericForm 可以迭代 this.props.children 来访问foo和栏 Inputs

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

    回复于

相关问题