Reactjs 在所有子组件的 componentDidMount 之后调用父组件的 componentDidMount 吗

发布于07月20日

我有下面的代码在我的父母呈现

<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>

我以为只有在加载了所有的child之后才会调用parent的组件didmount.但在这里，父级的componentDidMount在子级的componentDidMount之前被调用.

事情就是这样的吗？还是我做错了什么.

如果这就是工作原理，那么当所有子组件都从父组件加载时，我将如何检测？

推荐答案

UPDATE

这个答案适用于React 15.目前的版本是17+，因此这可能是不相关的.

ORIGINAL

是的，componentDidMount个子元素在父母面前被召唤.

Run the code below!

documentation states:

在初始渲染发生后立即调用一次，仅在客户端(而不是服务器上)上调用.在生命周期的这一点上，您可以访问子元素的任何引用(例如，访问底层DOM表示).child components的componentDidMount()方法在父组件的componentDidMount()方法之前被调用.

这是因为在渲染时，您应该能够引用任何内部/子 node ，但不接受try 访问父 node .

Run the code below.显示控制台输出.

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>