क्या घटक के सभी घटक के बाद कॉल किया गया माता-पिता का घटकडाइडमाउंट?

Question

मैं अपने बच्चे चार्ट

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

में माता-पिता

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

और नीचे दिए गए कोड की प्रस्तुत करना मेरे में नीचे दिए गए कोड है मैंने सोचा था कि माता-पिता की componentDidMount कहा जाता है के बाद ही सभी बच्चे लोड किए गए हैं। लेकिन यहां घटक को घटक के डायडमाउंट को घटक के बच्चे के भाग से पहले बुलाया जाता है।

क्या यह चीजें काम करती हैं? या मुझ से कुछ गलत हो रहा है।

यदि इस तरह चीजें काम करती हैं, तो मैं कैसे पता लगाऊंगा जब सभी बच्चे के घटक माता-पिता से लोड होते हैं?

Answer 1

हां componentDidMount बच्चों के माता-पिता से पहले कहा जाता है।

नीचे दिए गए कोड को चलाएं!

documentation states:

केवल ग्राहक (सर्वर पर नहीं) पर एक बार लागू, तुरंत बाद प्रारंभिक प्रतिपादन होता है। इस बिंदु पर जीवन चक्र में, आप अपने बच्चों के लिए किसी भी रेफरी तक पहुंच सकते हैं (उदाहरण के लिए, अंतर्निहित डीओएम प्रतिनिधित्व तक पहुंचने के लिए)। 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>