如何从React组件读取子元素

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

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

然而，您可以通过几个选项来实现它们，例如使用redux或React Context 实现React

Answer 2

我正在考虑您的子组件是从<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

传递给onGettingMoreChild的child变量示例为

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