जब मैं React.cloneElement बनाम this.props.children का उपयोग करना चाहिए?

Question

मैं अभी भी रिएक्ट में एक noob हूं और इंटरनेट पर कई उदाहरणों में, मैं बाल तत्वों को प्रस्तुत करने में इस भिन्नता को देखता हूं जो मुझे भ्रमित लगता है। आम तौर पर मैं इसे देखता हूं:

class Users extends React.Component {
  render() {
    return (
      <div>
        <h2>Users</h2>
        {this.props.children}
      </div>
    )
  }
}

लेकिन फिर मुझे इस तरह एक उदाहरण दिखाई देता है:

<ReactCSSTransitionGroup
     component="div"
     transitionName="example"
     transitionEnterTimeout={500}
     transitionLeaveTimeout={500}
     >
     {React.cloneElement(this.props.children, {
       key: this.props.location.pathname
      })}
</ReactCSSTransitionGroup>

अब मैं एपी को समझता हूं, लेकिन डॉक्स बिल्कुल स्पष्ट नहीं करते हैं कि मुझे इसका उपयोग कब करना चाहिए।

तो एक क्या करता है जो दूसरा नहीं कर सकता है? क्या कोई मुझे बेहतर उदाहरणों के साथ यह समझा सकता है?

Comments

youtube.com/watch?v=hEGg-3pIHlE यह लड़का दिखा रहा है कि वह कैसे क्लोन का उपयोग करता है। इसे कुछ उदाहरणों के लिए देखें

— iurii

Answer 1

संपादित करें:

को देखो Vennesa के जवाब के बजाय है, जो एक बेहतर व्याख्या है।

मूल:

सबसे पहले, React.cloneElementउदाहरण केवल तभी काम करता है जब आपका बच्चा एकल रिएक्ट तत्व हो।

लगभग सब कुछ {this.props.children}के लिए आप चाहते हैं। क्लोनिंग कुछ और उन्नत परिदृश्यों में उपयोगी है, जहां एक अभिभावक किसी तत्व में भेजता है और बच्चे के घटक को उस तत्व पर कुछ सहारा बदलने या वास्तविक DOM तत्व तक पहुंचने के लिए रेफरी जैसी चीजों को जोड़ना पड़ता है।

ऊपर दिए गए उदाहरण में, माता-पिता जो बच्चे को देते हैं, घटक के लिए महत्वपूर्ण आवश्यकता के बारे में नहीं जानते हैं, इसलिए यह दिए गए तत्व की एक प्रति बनाता है और ऑब्जेक्ट में कुछ विशिष्ट पहचानकर्ता के आधार पर एक कुंजी जोड़ता है। कुंजी क्या करता है के बारे में अधिक जानकारी के लिए: https://facebook.github.io/react/docs/multiple-computer.html

Answer 2

props.childrenवास्तविक बच्चे नहीं हैं; यह descriptorबच्चों का है। इसलिए आपके पास वास्तव में बदलने के लिए कुछ भी नहीं है; आप किसी भी प्रॉपर को नहीं बदल सकते हैं, या किसी भी कार्यक्षमता को संपादित नहीं कर सकते हैं; आप ही कर सकते हैं read from it। यदि आपको कोई संशोधन करने की आवश्यकता है तो आपको इसका new elementsउपयोग करना होगा React.CloneElement।

https://egghead.io/lessons/react-use-react-cloneelement-to-extend-functionality-of-children-components

एक उदाहरण:

एक घटक का मुख्य रेंडर फ़ंक्शन जैसे App.js:

render() {   
    return(
            <Paragraph>
              <Sentence>First</Sentence>
              <Sentence>Second</Sentence>
              <Sentence>Third</Sentence>
            </Paragraph>   
    ) 
}

अब कहते हैं कि आपको onClickप्रत्येक बच्चे के लिए एक जोड़ने की जरूरत है Paragraph; तो Paragraph.jsआप कर सकते हैं:

render() {
        return (
          <div>
          {React.Children.map(this.props.children, child => {
            return React.cloneElement(child, {
              onClick: this.props.onClick })   
         })}
         </div>
       ) 
}

तो बस आप यह कर सकते हैं:

render() {   
  return(
        <Paragraph onClick={this.onClick}>
          <Sentence>First</Sentence>
          <Sentence>Second</Sentence>
          <Sentence>Third</Sentence>
        </Paragraph>   
   ) 
}

नोट:React.Children.map समारोह केवल देखेंगे top levelतत्वों, यह चीजें हैं जो उन तत्वों प्रस्तुत करना से कोई भी देख नहीं करता है; इसका अर्थ है कि आप बच्चों (यहां <Sentence />तत्वों) को प्रत्यक्ष सहारा प्रदान कर रहे हैं । यदि आपको आगे बढ़ने के लिए प्रॉपर की आवश्यकता है, तो मान लें कि आपके पास <div></div>उन <Sentence />तत्वों में से एक है जो onClickप्रोप का उपयोग करना चाहते हैं तो उस स्थिति में आप इसे करने के Context APIलिए उपयोग कर सकते हैं । करParagraphप्रदाता और Sentenceतत्वों को उपभोक्ता ।

Comments

यह एक वास्तविक दुनिया उदाहरण के साथ एक स्पष्ट जवाब है। इसे और अधिक उभार की जरूरत है।

— SeaWarrior404

@ SeaWarrior404 से सहमत - मुझे लगता है कि ओपी एक एकल बच्चे के बजाय एक संग्रह पर पुनरावृति देखना चाह रहा था क्योंकि उसके उपयोगकर्ता इंटरफ़ेस में शीर्षक के रूप में "उपयोगकर्ता" / बहुवचन है। @Vennesa React.Children.mapके साथ संयोजन के React.cloneElementरूप में उपयोग करना , बहुत शक्तिशाली है

— जेकफ़ेकर

Answer 3

वास्तव में, React.cloneElementसख्ती से जुड़ा नहीं है this.props.children।

यह उपयोगी है जब भी आप की जरूरत है क्लोन तत्वों (प्रतिक्रिया करने के लिए PropTypes.element(जैसे, संलग्न ईवेंट हैंडलर्स माता पिता चाहने वालों घटक internals के बारे में ज्ञान होना या बताए) जोड़ने के लिए / ओवरराइड सहारा, key/ref विशेषताएँ)।

इसके अलावा प्रतिक्रिया तत्व अपरिवर्तनीय हैं ।

React.cloneElement (तत्व, [सहारा], [... बच्चे]) लगभग इसके बराबर है: <element.type {...element.props} {...props}>{children}</element.type>

---

हालांकि, childrenप्रतिक्रिया में प्रोप विशेष रूप से रोकथाम के लिए प्रयोग किया जाता है (उर्फ रचना ), के साथ युग्मित होने React.Childrenऔर एपीआई React.cloneElement, का उपयोग करता है props.children अधिक तर्क संभाल कर सकते हैं घटक है कि (जैसे, राज्य संक्रमण, घटनाओं, डोम माप आदि) आंतरिक रूप से करने के लिए प्रतिपादन हिस्सा उपज जबकि जहाँ भी इसका उपयोग किया जाता है, रिएक्ट राउटर <switch/>या मिश्रित घटक <select/>कुछ महान उदाहरण हैं।

एक अंतिम बात जो ध्यान देने योग्य है वह यह है कि प्रतिक्रिया तत्व प्रॉप्स.चिल्ड्रेन तक ही सीमित नहीं हैं।

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

वे हो सकता है जो कुछ भी रंगमंच की सामग्री समझ में आता है कि, कुंजी, घटक के लिए एक अच्छा अनुबंध को परिभाषित करने के लिए था इतना है कि यह के उपभोक्ताओं अंतर्निहित कार्यान्वयन विवरण से decoupled किया जा सकता है, यह उपयोग कर रहा है चाहे React.Children, React.cloneElementया यहां तक कि React.createContext।