Ich habe den folgenden Code in meinem Render des Elternteils
<div>
{
this.state.OSMData.map(function(item, index) {
return <Chart key={index} feature={item} ref="charts" />
})
}
</div>
Und Code unten in meinem Kinderdiagramm
<div className="all-charts">
<ChartistGraph data={chartData} type="Line" options={options} />
</div>
Ich dachte, die componentDidMount des Elternteils wird erst aufgerufen, nachdem alle Kinder geladen wurden. Hier wird jedoch die componentDidMount des übergeordneten Elements vor der componentDidMount des untergeordneten Elements aufgerufen.
Funktionieren die Dinge so? Oder mache ich etwas falsch?
Wenn die Dinge so funktionieren, wie würde ich erkennen, wenn alle untergeordneten Komponenten vom übergeordneten geladen werden?
javascript
reactjs
Aakash Sigdel
quelle
quelle
componentDidMount()
Methode der untergeordneten Komponenten wird vor der der übergeordneten Komponenten aufgerufen : Link .componentDidMount()
, um einige Manipulationen (AJAX oder was auch immer) durchzuführen, bevor Sie die untergeordneten Komponenten geladen haben. Wenn Ihre untergeordneten Komponenten bereits im übergeordneten Element ohne Abhängigkeit von externen Daten angeordnet wurden,componentDidMount()
wird das untergeordnete Element vor dem übergeordneten Element aufgerufen.Antworten:
Ja, die
componentDidMount
Kinder werden vor den Eltern angerufen.Führen Sie den folgenden Code aus!
Dokumentation besagt :
Dies liegt daran, dass Sie zum Zeitpunkt des Renderns auf interne / untergeordnete Knoten verweisen können sollten. Der Versuch, auf übergeordnete Knoten zuzugreifen, wird nicht akzeptiert.
Führen Sie den folgenden Code aus . Es zeigt die Konsolenausgabe.
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>
quelle
The componentDidMount() method of child components is invoked before that of parent components
, dass ich ihn auf der Reaktionsseite nicht finden konnte?componentDidMount
hier sind: facebook.github.io/react/docs/…