Question

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

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

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

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

如果这是事情的工作方式，我如何检测从父项加载所有子组件的时间？

Answer 1

是的，在父母之前调用componentDidMount个孩子。

运行以下代码！

documentation states：

在初始渲染发生后立即仅在客户端（不在服务器上）调用一次。在生命周期的这一点上，您可以访问您孩子的任何引用（例如，访问底层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>

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

1 个答案: