javascript - {This.props.children}क्या है और आपको इसका उपयोग कब करना चाहिए?




reactjs react-redux frontend (3)

मुझे लगता है कि आप इसे एक रिएक्ट घटक की render विधि में देख रहे हैं, इस तरह (संपादित करें: आपका संपादित प्रश्न वास्तव में यह दिखाता है) :

class Example extends React.Component {
  render() {
    return <div>
      <div>Children ({this.props.children.length}):</div>
      {this.props.children}
    </div>;
  }
}

class Widget extends React.Component {
  render() {
    return <div>
      <div>First <code>Example</code>:</div>
      <Example>
        <div>1</div>
        <div>2</div>
        <div>3</div>
      </Example>
      <div>Second <code>Example</code> with different children:</div>
      <Example>
        <div>A</div>
        <div>B</div>
      </Example>
    </div>;
  }
}

ReactDOM.render(
  <Widget/>,
  document.getElementById("root")
);
<div id="root"></div>
<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>

children रिएक्ट घटकों की एक विशेष संपत्ति है जिसमें घटक के भीतर परिभाषित कोई भी बाल तत्व शामिल हैं, उदाहरण के लिए ऊपर दिए गए Example अंदर divs{this.props.children} उन बच्चों को प्रदान किए गए परिणाम में शामिल करता है।

... उसी का उपयोग करने के लिए क्या स्थितियां हैं

आप इसे तब करेंगे जब आप सीधे प्रस्तुत किए गए आउटपुट में बाल तत्वों को शामिल करना चाहते हैं, अपरिवर्तित; और अगर तुम नहीं किया।

रिएक्ट की दुनिया के लिए एक शुरुआत होने के नाते, मैं गहराई से समझना चाहता हूं कि क्या होता है जब मैं {this.props.children} उपयोग करता हूं और उसी का उपयोग करने के लिए क्या परिस्थितियां होती हैं। नीचे दिए गए कोड स्निपेट में इसकी प्रासंगिकता क्या है?

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}

'बच्चे ’क्या हैं?

रिएक्ट डॉक्स का कहना है कि आप 'जेनेरिक बॉक्स' का प्रतिनिधित्व करने वाले घटकों पर props.children उपयोग कर सकते हैं और जो समय से पहले अपने बच्चों को नहीं जानते हैं। मेरे लिए, यह वास्तव में चीजों को स्पष्ट नहीं करता था। मुझे यकीन है कि कुछ के लिए, यह परिभाषा बिल्कुल सही है, लेकिन यह मेरे लिए नहीं था।

यह क्या है। मेरी सरल व्याख्या यह है कि यह एक घटक को लागू करते समय खुलने और बंद होने वाले टैग के बीच जो कुछ भी शामिल है, उसे प्रदर्शित करने के लिए उपयोग किया जाता है।

एक सरल उदाहरण:

यहां एक स्टेटलेस फ़ंक्शन का एक उदाहरण है जो एक घटक बनाने के लिए उपयोग किया जाता है। फिर से, चूंकि यह एक फ़ंक्शन है, इसलिए यह कोई कीवर्ड नहीं है इसलिए बस props.children उपयोग props.children

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

इस घटक में एक <img> जो कुछ props प्राप्त कर रहा है और फिर यह {props.children} प्रदर्शित कर रहा है।

जब भी इस घटक का आह्वान किया जाता है तो {props.children} को भी प्रदर्शित किया जाएगा और यह केवल एक संदर्भ है जो घटक के खुलने और बंद होने के बीच है।

//App.js
render () {
  return (
    <div className='container'>
      <Picture key={picture.id} src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

घटक को स्व-समापन टैग <Picture /> साथ लागू करने के बजाय यदि आप इसे भरते हैं तो टैग खोलने और बंद करने के टैग <Picture> </Picture> आप इसके बीच अधिक कोड रख सकते हैं।

यह डे-कपल्स <Picture> अपनी सामग्री से घटक है और इसे और अधिक पुन: प्रयोज्य बनाता है।

संदर्भ: रिएक्ट के प्रॉपर.चिल्ड्रेन के लिए एक त्वरित परिचय


var time = Date.now || function() {
  return +new Date;
};

time();




javascript reactjs react-redux frontend