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

How get children array from parent component in ReactJS?

本文关键字：组件 数组 ReactJS      更新时间：2023-09-26

我有一个组件，它有这样的子组件(JSX):

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

父类有一个方法，它需要查询所有子类以从它们那里获得一些信息。我该怎么做呢?

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

this.props.children将不起作用，因为它是从父代传递下来的孩子。如果我把传递给constructor的children存起来，那就是一个空对象。我该怎么做呢?

我也不想为每个子元素创建一个ref(这看起来像是硬编码)。

如果你需要在父组件中显示子组件的状态，那么它应该出现在开始的位置。

在阅读了官方文档中有关refs的更多信息后，应该清楚地知道它只应该在几种情况下使用，并且您将更好地组织和处理父组件中的状态，并仅将相关数据进一步传递给子组件。

Refs是一个很好的方式来发送消息到一个特定的子实例，这种方式将不方便通过流化的Reactive props和state来实现。但是，它们不应该成为应用程序中流动数据的首选抽象。默认情况下，使用Reactive数据流，并为非响应性的用例保存引用。

…

如果你没有使用React编写过几个应用程序，你的第一倾向通常是尝试使用refs来"让事情发生"。如果是这种情况，花点时间，更批判性地思考一下state在组件层次结构中的归属。通常，"拥有"的合适位置变得很明显;该状态在层次结构中处于更高的级别。将状态放置在那里通常会消除使用"使事情发生"的参考的任何愿望。-相反，数据流通常会完成你的目标。

你可以将一个函数作为prop传递给子函数，并在子函数挂载时调用它。

In your parent:

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() {
    ...
  }
}

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

相关文章：