Question

我有一个像这样的孩子组件（JSX）：

<div>
    <ChildComponent />
    <OtherChildComponent />
</div>

父级有一个方法，它需要查询所有孩子以从中获取一些信息。我该怎么做：

（伪代码）

makeData()
{
    for ( var i  = 0; i < this.children.length; i++ )
    {
        console.log( this.children[i].getValue() );
    }
}

this.props.children因为那些孩子从父母那里传下来而无法工作。如果我将children传递给constructor，那就是一个空对象。我该怎么做？

我不想为每个孩子创建一个参考（这似乎是硬编码）。

Answer 1

如果您需要父组件中孩子的状态，那就是它应该在开头的位置。

在官方文档中阅读More about refs之后，应该清楚它应该仅在少数情况下使用，并且您可以更好地组织和处理父组件中的状态并仅传递儿童的相关数据。

<强>摘要

Refs是一种向特定子实例发送消息的好方法，这种方式通过流式传输反应道具和状态不方便。但是，它们不应成为您通过应用程序传输数据的首选抽象。默认情况下，使用Reactive数据流并将refs保存为本质上不具有反应性的用例。

...

如果您还没有使用React编写多个应用程序，那么您的第一个倾向通常是尝试使用refs来“让事情发生”。如果是这种情况，请花一点时间，更关键地考虑组件层次结构中应该拥有状态的位置。通常，很明显，“拥有”该状态的适当位置在层次结构中处于更高级别。将状态放置在那里通常会消除使用refs“让事情发生”的任何愿望 - 相反，数据流通常会实现你的目标。

Answer 2

您可以将作为道具的功能传递给儿童，并在安装时调用它。

在你的父母：

class Parent extends Component {
  constructor(props) {
    super(props)
    this.values = []
  }

  addValue(value) {
    this.values.push(value)
  }

  render() {
    return (
      <div>
        <Child addValueToParent={ this.addValue } />
        <Child addValueToParent={ this.addValue } />
        <Child addValueToParent={ this.addValue } />
      </div>
    )
  }
}

在你的孩子身上：

class Child extends Component {
  componentDidMount() {
    this.props.addValueToParent("foo")
  }

  render() {
    ...
  }
}

但是，如果可以，最好直接将数据存储在父级状态中。

如何在ReactJS中从父组件获取子数组？

2 个答案: