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

Question

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

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

Comments

ReactJS

— माज़ादेब

दिए गए लिंक में यह स्पष्ट नहीं था कि जब मैं किसी घटक के अंदर {this.props.children} का उपयोग करता हूं तो क्या होता है।

— निमी

सर्वश्रेष्ठ संसाधन mxstbr.blog/2017/02/react-children-deepdive

— अक्षय विजय जैन

Answer 1

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

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

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

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

यहां एक स्टेटलेस फ़ंक्शन का एक उदाहरण है जो एक घटक बनाने के लिए उपयोग किया जाता है। फिर, चूंकि यह एक फ़ंक्शन है, thisइसलिए कोई कीवर्ड नहीं है इसलिए बस उपयोग करें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>अपनी सामग्री से घटक को डी-कप करता है और इसे अधिक पुन: प्रयोज्य बनाता है।

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

Comments

यदि पुन: प्रयोज्य बच्चे के नोड्स के लिए चिंतित नहीं है, तो क्या चाइल्ड घटक से {props.children} को चाइल्ड घटक के अंदर उपयोग करने की तुलना में कॉल करने पर कोई प्रदर्शन अंतर है?

— निमी

जब @ props.children} का उपयोग कर रहे हैं, तो हमारे पास प्रदर्शन समस्या नहीं है, बस सहारा के रूप में पारित घटक की आवश्यकता है। और जब हम बाल घटक के अंदर बच्चों का उपयोग कर सकते हैं तो {props.children} का उपयोग करने की आवश्यकता नहीं है

— सोरह चेहेरेसा

उदाहरण codeburst.io/… से है

— अल्पित आनंद

@AlpitAnand आप उत्तर के अंत में संदर्भ देख सकते हैं: |

— सोरूस चेहेरेसा

बहुत बहुत धन्यवाद। बहुत अच्छी तरह से समझाया।

— आलोक रंजन

Answer 2

मुझे लगता है कि आप इसे एक रिएक्ट घटक की 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रिएक्ट घटकों की एक विशेष संपत्ति है जिसमें घटक के भीतर परिभाषित कोई भी बाल तत्व शामिल है, जैसे ऊपर के divsअंदर Example। {this.props.children}उन बच्चों को प्रदान किए गए परिणाम में शामिल हैं।

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

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

Comments

यदि पुन: प्रयोज्य बच्चे के नोड्स के लिए चिंतित नहीं है, तो क्या चाइल्ड घटक से {props.children} को चाइल्ड घटक के अंदर उपयोग करने की तुलना में कॉल करने पर कोई प्रदर्शन अंतर है?

— निमी

@ निमी: मुझे क्षमा करें, मुझे नहीं पता कि आप का क्या मतलब है * "... बाल घटक के अंदर इसका उपयोग करने की तुलना में"।

— टीजे क्राउडर

मेरा मतलब था "कॉलिंग {this.props.children} बच्चे घटक में संबंधित बाल घटक में सीधे नोड्स लिखने से"।

— निमी

@ निम्मी मैं मान रहा हूं कि आप सोच रहे हैं कि मैं {this.props.children} को क्यों डालूं क्योंकि मैं इसे लिख सकता हूं, मुझे पता है। अगर ऐसा है तो कृपया ऐसा करें और प्रदर्शन में थोड़ा फायदा हो। लेकिन आपका घटक स्थिर होगा, यह आपके कोडबेस में अलग-अलग जगह अलग-अलग बच्चों के सेट के साथ पुन: उपयोग नहीं किया जा सकता है।

— सुबिन सेबेस्टियन

@ एसएससी: आह! अच्छा है। निम्मी - हां, आप अपने बच्चों को सीधे लिख सकते हैं render, लेकिन यह हर उदाहरण में वही बच्चे होंगे। बाल तत्वों (जहां उपयुक्त हो) को स्वीकार करके, आपके घटक के प्रत्येक उदाहरण में अलग-अलग सामग्री हो सकती है। मैंने उत्तर में उदाहरण को अद्यतन किया है।

— टीजे क्राउडर

Answer 3

props.children किसी घटक को इनवॉइस / रेंडर करते समय खुलने और बंद होने वाले टैग के बीच सामग्री का प्रतिनिधित्व करता है:

const Foo = props => (
  <div>
    <p>I'm {Foo.name}</p>
    <p>abc is: {props.abc}</p>

    <p>I have {props.children.length} children.</p>
    <p>They are: {props.children}.</p>
    <p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p>
  </div>
);

const Baz = () => <span>{Baz.name} and</span>;
const Bar = () => <span> {Bar.name}</span>;

आह्वान / कॉल / रेंडर करें Foo:

<Foo abc={123}>
  <Baz />
  <Bar />
</Foo>