Ist componentDidMount Eltern aufgerufen, nachdem alle componentDidMount der Kinder?

Ich habe den code unten in meiner Darstellung von übergeordneten

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

Und folgenden code in meine child-Diagramm

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

Ich dachte, die componentDidMount der Eltern wird nur aufgerufen, nachdem alle child-Prozesse geladen werden. Aber hier die componentDidMount Eltern aufgerufen wird, bevor die componentDidMount des Kindes.

Ist dies, wie Dinge funktionieren? Oder mache ich etwas falsch.

Wenn dies ist, wie die Dinge funktionieren, wie würde ich erkennen, wenn alle Kind-Komponenten geladen werden, von den Eltern?

  • Die componentDidMount() Methode der untergeordneten Komponenten wird aufgerufen, bevor der parent-Komponenten: Link.
  • Aber wenn ich console.melden Sie in beide Eltern und Kind componentDidMount(). Textform Eltern-Konsole.log ist zuerst gedruckt
  • Beispiel Geige?
  • Es gibt richtige Ergebnis in der Geige. Kann sein das es ist weil ich bin das abrufen von Daten async in componentDidMount der Eltern und über das zurückgegebene array aus der call-in Schleife über das Kind OSMData zurückgegeben wird der ajax-Aufruf.
  • ja, also im Grunde Sie benutzt der Eltern componentDidMount() zu tun, einige Manipulationen (AJAX oder was auch immer) vor dem laden der Kind-Komponenten. Wenn Ihr Kind Komponenten wurden bereits festgelegt, die in übergeordnete ohne Abhängigkeit auf externe Daten, dann Kind componentDidMount() wird aufgerufen, bevor der Eltern.
  • Ich bin vor dem gleichen problem. Asynchrone Laden von Daten bricht mein componentDidMount () - Zyklus, weil ein Platzhalter ist, zeigten erste. Ich denke, es gibt keine Möglichkeit, das zu umgehen. Vielleicht Umstrukturierung meiner Komponenten...
  • Können Sie fügen Sie den code, die Sie verwenden in componentDidMount oder sonst können Sie diese Frage beantworten Sie sich selbst und markieren Sie Sie als abgeschlossen?

InformationsquelleAutor Aakash Sigdel | 2015-09-28
  1. 59

    Ja die componentDidMount von Kindern aufgerufen werden, bevor der Elternteil.

    Führen Sie den code unten!

    Dokumentation Staaten:

    Einmal aufgerufen, nur auf dem client (nicht der server), sofort nach der ersten Wiedergabe Auftritt. An diesem Punkt im Lebenszyklus, können Sie auf alle refs auf Ihre Kinder (z.B., um den Zugriff auf die zugrunde liegende DOM-Darstellung). Die componentDidMount() Methode der Kind-Komponenten wird aufgerufen, bevor der parent-Komponenten.

    Dies ist, weil zum Zeitpunkt der Erbringung, sollten Sie in der Lage sein, um auf eine interne/Kind-Knoten, die versuchen auf übergeordneten Knoten nicht akzeptiert.

    Führen Sie den code unten. Es zeigt die Ausgabe in der Konsole.

    JS:

    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')
);

    HTML:

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

    • Könnten Sie den link, der sagt The componentDidMount() method of child components is invoked before that of parent components ich konnte ihn nicht finden in reagieren Website.
    • Dies scheint nicht zu erscheinen, in der Dokumente mehr, da hier nur die offiziellen docs ive finden Sie auf componentDidMount sind hier: facebook.github.io/reagieren/docs/...
    • richtig war es in der älteren version von docs github.com/facebook/react/blob/v15.0.1/docs/docs/...
    • FWIW componentWillMount() ein Elternteil WIRD aufgerufen, bevor entweder der Kinder componentWillMount() oder componentDidMount () - Routinen, so dass ist, wo Sie ausgeführt werden soll code, der muss bereit sein dort. Was ist noch verrückter ist, dass selbst wenn Sie ein statement in Ihrem Mutter-render wie diese: {codeThatNeedsToBeRunFirstBoolean ? <mycomponent /> : null}, und die codeThatNeedsToBeRunFirstBoolean falsch ist, componentDidMount() auf mycompoment noch aufgerufen wird.
    • Ich Wandere, warum verschwand es von den docs...
    InformationsquelleAutor Blair Anderson
Schreibe einen Kommentar