मैंने रिएक्ट घटक मॉडल की वास्तविक शक्ति को पूरी तरह से समझे बिना महीनों तक रिएक्ट के साथ विकास किया। एक दिन मैंने रचना में उतरने का फैसला किया, और यही मैंने सीखा।

प्रतिक्रिया घटक और बच्चे

प्रतिक्रिया में, एक घटक में एक, कई, या कोई बच्चे नहीं हो सकते हैं। बढ़िया, लेकिन रुकिए — "बच्चे" क्या हैं? आइए एक उदाहरण से समझाएं:

प्रोफ़ाइल घटक के दो बच्चे हैं: प्रोफ़ाइल छवि और प्रोफ़ाइल विवरण, जबकि इन दोनों के कोई बच्चे नहीं हैं।

"JSX एक्सप्रेशन में जिसमें ओपनिंग टैग और क्लोजिंग टैग दोनों होते हैं, उन टैग्स के बीच की सामग्री को एक विशेष प्रॉप के रूप में पास किया जाता है: प्रॉप्स.चिल्ड्रेन" — रिएक्ट डॉक्यूमेंटेशन

अनिवार्य रूप से, प्रॉप्स.चिल्ड्रन एक विशेष प्रॉप है, जो स्वचालित रूप से प्रत्येक घटक को पास हो जाता है, जिसका उपयोग किसी घटक को लागू करते समय उद्घाटन और समापन टैग के बीच शामिल सामग्री को प्रस्तुत करने के लिए किया जा सकता है। इस प्रकार के घटकों को आधिकारिक दस्तावेज़ द्वारा "बक्से" के रूप में पहचाना जाता है।

JSX सिंटेक्स द्वारा घटकों की पहचान करना

रिएक्ट के JSX में, बच्चों वाले एक घटक को हमेशा एक शुरुआती टैग और एक समापन टैग द्वारा पहचाना जाता है। प्रत्येक बच्चे को इन दो टैगों के बीच रखा जाना चाहिए, जैसा कि हमने ऊपर देखा है। जब किसी घटक में कोई संतान नहीं होती है, तो आप इसे या के साथ शुरू कर सकते हैं, लेकिन बाद वाला सिंटैक्स आम तौर पर पसंद किया जाता है। स्व-समापन टैग का उद्देश्य कोड को छोटा और पढ़ने में आसान बनाना है।

कार्रवाई में प्रॉप्स.चिल्ड्रेन

आइए मान लें कि हम एक ImageSlider घटक बनाना चाहते हैं। हमारा लक्ष्य घटक को इस प्रकार लागू करना है:

जैसा कि आप देख सकते हैं, ImageSlider कई से बना है, जिसेprops.children के माध्यम से एक्सेस और रेंडर किया जा सकता है।

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

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

प्रॉप्स.चिल्ड्रन के लिए किस प्रकार की सामग्री की अनुमति है?

प्रॉप्स.चिल्ड्रेन के माध्यम से एक घटक को दी गई सामग्री में शामिल हो सकते हैं

अपरिभाषित, अशक्त, एक बूलियन, एक संख्या, एक स्ट्रिंग, एक प्रतिक्रिया तत्व, या इनमें से किसी भी प्रकार की एक सरणी पुनरावर्ती रूप से। यह इनमें से किसी एक प्रकार को लौटाने वाला फ़ंक्शन भी हो सकता है।

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

  { String(undefined) }

प्रॉप्स.चिल्ड्रन इतना महत्वपूर्ण क्यों है?

props.children हमें घटकों की रचना करने की अनुमति देता है, और इसलिए परिणामस्वरूप हमारा फ्रंट-एंड इंटरफ़ेस; रिएक्ट घटक मॉडल की वास्तविक शक्ति का उपयोग करना।

"रिएक्ट के पास एक शक्तिशाली कंपोजिशन मॉडल है, और हम घटकों के बीच कोड का पुन: उपयोग करने के लिए इनहेरिटेंस के बजाय कंपोजिशन का उपयोग करने की सलाह देते हैं।" — प्रतिक्रिया दस्तावेज़

जैसा कि आधिकारिक दस्तावेज में बताया गया है, आपको कभी-कभी एक घटक में कई "छेद" भरने की आवश्यकता हो सकती है। ऐसे मामलों में, प्रॉप्स.चिल्ड्रन का उपयोग करने के बजाय, एकाधिक कस्टम प्रॉप्स को परिभाषित करना बेहतर दृष्टिकोण हो सकता है; जैसा कि निम्नलिखित उदाहरण में दिखाया गया है:

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

प्रतिक्रिया.बच्चे

"React.Children प्रॉप्स.चिल्ड्रन अपारदर्शी डेटा संरचना से निपटने के लिए उपयोगिताएँ प्रदान करता है" — React दस्तावेज़ीकरण

props.children एक "अपारदर्शी डेटा संरचना" क्यों है?

क्योंकि प्रॉप्स.चिल्ड्रन में एक, कई, या कोई चाइल्ड तत्व नहीं हो सकते हैं, जिसका अर्थ है कि इसका मान एक सिंगल चाइल्ड नोड, चाइल्ड नोड्स की एक सरणी, या हो सकता है। अपरिभाषित क्रमशः। React.Children API के लिए धन्यवाद, हम इसके प्रत्येक संभावित प्रकार को ध्यान में रखे बिना आसानी सेprops.children से निपट सकते हैं। शुक्र है, पृष्ठभूमि में हमारे लिए सब कुछ संभाल लिया जाएगा।

लेखन के समय, React.Children पांच अलग-अलग उपयोगिताएं प्रदान करता है:

• नक्शा

• प्रत्येक के लिए

• गिनती करना

• केवल

• toArray

आइए एक उदाहरण के साथ देखें कि हम React.Children का उपयोग कैसे कर सकते हैं। मान लीजिए कि हम ImageSlider घटक के प्रत्येक बच्चे के लिए विशेष CSS वर्ग img-special-class जोड़ना चाहते हैं। इसे इस प्रकार किया जा सकता है:

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map हमें प्रॉप्स.चिल्ड्रेन पर पुनरावृति करने और प्रत्येक तत्व को दूसरे पैरामीटर के रूप में पारित फ़ंक्शन के अनुसार बदलने की अनुमति देता है। अपने लक्ष्य को प्राप्त करने के लिए, हमने React.cloneElement का उपयोग किया। ऐसा इसलिए है क्योंकि हमें क्लासनेम प्रोप का मान बदलने की जरूरत है, लेकिन प्रॉप्स रिएक्ट में अपरिवर्तनीय हैं, इसलिए हमें प्रत्येक बच्चे का क्लोन बनाना पड़ा।

निष्कर्ष

एक महान रिएक्ट डेवलपर बनने और रिएक्ट घटक मॉडल की पूरी क्षमता का दोहन शुरू करने के लिए प्रॉप्स.चिल्ड्रन में महारत हासिल करना आवश्यक है। प्रॉप्स.चिल्ड्रन रिएक्ट की सबसे उपयोगी विशेषताओं में से एक है, क्योंकि यह हमें चाइल्ड घटकों को प्रस्तुत करने की क्षमता देता है। इस वजह से, प्रत्येक डेवलपर को पता होना चाहिए कि इसका सही तरीके से उपयोग कैसे किया जाए।

मुझे उम्मीद है कि यह लेख आपको रिएक्ट में रचना में महारत हासिल करने में मदद करेगा।

पोस्ट "ए कम्प्लीट गाइड टू प्रॉप्स.चिल्ड्रेन इन रिएक्ट" सबसे पहले राइटटेक पर दिखाई दी।