我的父渲染中有下面的代码
<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>
我认为只有在加载所有子项后才调用父项的 componentDidMount 。但这里parent的componentDidMount是在child的componentDidMount之前调用的。
事情就是这样吗？或者我做错了什么。
如果这就是事情的工作原理，我将如何检测何时从父组件加载所有子组件？
UPDATE
这个答案适用于 React 15。当前版本是 17+，所以这可能是不相关的。
ORIGINAL
Yes the componentDidMount的孩子在父母之前被调用。
运行下面的代码！
文档状态 https://github.com/facebook/react/blob/v15.0.1/docs/docs/ref-03-component-specs.md#mounting-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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
