我的父级渲染中有以下代码
<div>
{
this.state.OSMData.map(function(item, index) {
return <Chart key={index} feature={item} ref="charts" />
})
}
</div>
和下面的代码在我的孩子图表中
<div className="all-charts">
<ChartistGraph data={chartData} type="Line" options={options} />
</div>
我认为只有在加载所有孩子之后才会调用 parent 的 componentDidMount 。但是这里父组件的componentDidMount在子组件的componentDidMount之前被调用。
这就是事情的运作方式吗？或者我做错了什么。
如果这是工作原理，我将如何检测所有子组件何时从父组件加载？
更新
此答案适用于 React 15。当前版本为 17+，因此这可能无关紧要。
原来的
是的componentDidMount，孩子的名字在父母之前被调用。
运行下面的代码！
文件说明：
仅在客户端（不在服务器）上调用一次，在初始渲染发生后立即调用。在生命周期的这一点上，您可以访问对您的孩子的任何引用（例如，访问底层 DOM 表示）。子组件的
componentDidMount()方法先于父组件调用。
这是因为在渲染时，您应该能够引用任何内部/子节点，不接受尝试访问父节点。
运行下面的代码。它显示控制台输出。
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="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/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>