Question

我想获得一个react组件的所有子元素的列表。

例如：

Parent.js

<Parent>
   <SomeComponent/>
</Parent>

SomeComponent.js

<SomeComponent>
   <ChildElement1/>
   <ClhidElement2/>
</SomeComponent>

所以在Parent.js中，我想得到ChildElement1和ChildElement2。有可能吗？

我的用例是：

我正在将表单字段（字段组件）传递给通用表单组件。 Form元素接收一个默认值的对象以及其他内容（例如与CRUD /资源有关的对象）。并且它必须在字段中注入这些值。我没有一一传递所有字段并避免重复，我创建了诸如“ UserFields”之类的容器以及其他一些容器，它们是具有Fields组件的容器。因此，我需要使用Form来读取UserFields中的字段。但是由于这些字段已经在UserFields内部，所以我不知道如何获取它们。

Answer 1

我正在考虑从<SomeComponent />内的数组映射您的子组件

在您的父母内部尝试

state = {
   child: []
}
renderChildren = () => {
   if(this.state.child.length > 0) {
      return this.state.child.map(e => {
          return (
             <div>{e}</div>
          )
      })
   }
}
returnChild = (data) => {
   var child = [];
   for(var i = 0; i < data.length; i++) {
      child.push(data[i])
   }
   this.setState(prevState => ({child: [...prevState.child, child]}));
}
return (
    <div>
       <SomeComponent returnChild={(child) => this.returnChild(child)} />
       {this.renderChildren()}
    </div>
)

将此方法以及其他代码添加到您的<SomeComponent />组件中。

onGettingMoreChild = (child) => {
    this.props.returnChild(child)
}

只要创建了一个新孩子，别忘了打电话给onGettingMoreChild。

我尚未测试此代码。如果需要，请使用它来解决。另外，请记住将整个视图作为child传递给方法onGettingMoreChild

传递给child的{{1}}变量的示例是

onGettingMoreChild

Answer 2

React被设计为单向数据流并遵循Flux体系结构，因此为了保持最佳实践，它始终是自上而下的（从父级到子级，而不是双向的）。

但是，您可以通过多种选择来实现它们，例如实现React with redux或React Context

如何从React组件中读取子元素

2 个答案: