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

我想得到react组件的所有子元素的列表

例如：

Parent.js

<Parent>
   <SomeComponent/>
</Parent>

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

SomeComponent.js

<Parent>
   <SomeComponent/>
</Parent>

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

所以在

Parent.js

中，我想得到

ChildElement1

和

ChildElement2

。 可能吗

我的用例是：

---

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

我认为您的子组件是从内部数组映射的

在你的父母身上试试这个

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>
)

每当创建新的子项时，不要忘记调用

onGettingMoreChild

我还没有测试过这段代码。如果需要，请玩玩它。另外，记住将整个视图作为

child

传递给方法

onGettingMoreChild

传递给

onGettingMoreChild

的

child

变量示例如下

<div>I am child one!!</div>

我是一个孩子！！

React

设计为单向数据流，并遵循

Flux

体系结构，因此为了保持最佳实践，它总是自上而下（从父级到子级，而不是双向）

---

但是，您可以通过几个选项实现它们，例如实现或

我可以问一下您的用例是什么吗？当然可以。我刚刚更新了问题