रिएक्ट में काम करते समय, एक सूची घटक होना आम बात है जो डेटा स्वीकार करता है और इसे प्रदर्शित करने के लिए प्रत्येक आइटम पर मैप करता है। हालाँकि, आपके एप्लिकेशन के विभिन्न हिस्सों को एक ही डेटा के लिए अलग-अलग रेंडरिंग की आवश्यकता हो सकती है। इसके लिए सबसे अच्छा समाधान एक कस्टम रेंडरिंग फ़ंक्शन को पास करने के लिए रेंडर प्रोप का उपयोग करके अपने सूची घटक को अधिक लचीला बनाना है।

यह क्यों आवश्यक है?

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

समाधान क्या है?

एक सरल और सुंदर समाधान यह है कि आपका सूची घटक एक रेंडरआइटम फ़ंक्शन स्वीकार करे। यह फ़ंक्शन एक व्यक्तिगत आइटम (हमारे मामले में, एक उपयोगकर्ता) को एक तर्क के रूप में लेता है और एक रिएक्ट नोड लौटाता है जिसे आपकी इच्छानुसार किसी भी तरह से प्रस्तुत किया जा सकता है।

import React from 'react';

const List = ({ data, renderItem }) => {
  return (
    

{data.map((item) => (
• {renderItem(item)}
))}

इस घटक का उपयोग कैसे करें?

import List from './List';

const users = [
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' }
];

const UserList = () => {
  return (
     {user.name}}
    />
  );
};

// or 

const DetailedUserList = () => {
  return (
     (
        

          {user.name}
          
{user.email}
        
      )}
    />
  );
};

यह एक महान पैटर्न क्यों है?

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

यदि आपने रिएक्ट नेटिव के साथ काम किया है, तो यह पैटर्न परिचित होना चाहिए, क्योंकि इसका उपयोग फ़्लैटलिस्ट जैसे उनके सूची घटकों में किया जाता है। यह सूचियाँ प्रस्तुत करने के लिए एक सिद्ध, विश्वसनीय समाधान है।

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

अब जब आपने यह पैटर्न सीख लिया है, तो इसे अपने रिएक्ट प्रोजेक्ट्स में आज़माएं, और आप देखेंगे कि यह कितना शक्तिशाली और लचीला है! हैप्पी कोडिंग?