-1

我想获取一个反应组件的所有子元素的列表。

例如：

父.js

<Parent>
   <SomeComponent/>
</Parent>

SomeComponent.js

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

所以Parent.js我想得到ChildElement1and ChildElement2。那可能吗？

我的用例是：

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

4

2 回答 2

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传递给的变量示例onGettingMoreChild是

<div>I am child one!!</div>
于 2018-07-13T01:27:39.767 回答
1

React被设计为单向数据流和遵循Flux架构，因此为了保持最佳实践，它总是自上而下（从父到子，而不是双向）。

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

于 2018-07-13T01:30:10.847 回答