在所有componentDidMount的子项之后调用parentDidMount吗？

本文介绍了在所有componentDidMount的子项之后调用parentDidMount吗？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在父母的渲染中有以下代码

I have the code below in my render of parent

<div> { this.state.OSMData.map(function(item, index) { return <Chart key={index} feature={item} ref="charts" /> }) } </div>

以下代码在我的孩子图表中

And code below in my child Chart

<div className="all-charts"> <ChartistGraph data={chartData} type="Line" options={options} /> </div>

我认为只有在加载所有子节点后才调用parentDidMount。但是这里父子的componentDidMount在child的componentDidMount之前调用。

I thought the componentDidMount of parent is called only after all childs are loaded. But here the componentDidMount of parent is called before the componentDidMount of child.

这是怎么回事？或者我做错了什么。

Is this how things work? Or am I doing something wrong.

如果这是事情的工作原理，我如何检测从父母那里加载所有子组件的时间？

If this is how things work, how would I detect when all the child components are loaded from parent?

推荐答案

是的，在父项之前调用子项的 componentDidMount 。

Yes the componentDidMount of children are called before the parent.

运行以下代码！

文档状态：

在初始渲染发生后立即在客户端（不在服务器上）调用一次。在生命周期的这一点上，您可以访问您孩子的任何引用（例如，访问底层DOM表示）。 子组件的 componentDidMount（）方法在父组件之前调用。

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, you can access any refs to your children (e.g., to access the underlying DOM representation). The componentDidMount() method of child components is invoked before that of parent components.

这是因为在渲染时，你应该能够引用任何内部/子节点，试图访问父节点不是接受。

This is because at time of rendering, you should be able to reference any internal/child nodes, attempting to access parent nodes is not accepted.

运行以下代码。它显示了控制台输出。

Run the code below. It shows the console output.

var ChildThing = React.createClass({ componentDidMount: function(){console.log('child mount')}, render: function() { return <div>Hello {this.props.name}</div>; } }); var Parent = React.createClass({ componentDidMount: function(){console.log('parent')}, render: function() { return <div>Sup, child{this.props.children}</div>; } }); var App = React.createClass({ componentDidMount: function(){console.log('app')}, render: function() { return ( <div> <Parent> <ChildThing name="World" /> </Parent> </div> ); } }); ReactDOM.render( <App />, document.getElementById('container') );

<script src="cdnjs.cloudflare/ajax/libs/react/15.1.0/react.min.js"></script> <script src="cdnjs.cloudflare/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"> <!-- This element's contents will be replaced with your component. --> </div>