इस ब्लॉग पोस्ट में, मैं आपको एक व्यावहारिक परिदृश्य के बारे में बताऊंगा जहां एक मूल घटक (ListBox) एक चाइल्ड घटक (AlertComponent के साथ इंटरैक्ट करता है ]) प्रॉप्स और कॉलबैक का उपयोग करना।

यह रिएक्ट में तब उपयोगी होता है जब आप चाहते हैं कि कोई चाइल्ड कंपोनेंट स्थिति बनाए रखने या कार्रवाइयों को ट्रिगर करने के लिए पैरेंट से वापस संवाद करे।

आइए इस उदाहरण की मदद से समझते हैं:

• मेरे पास एक ListBox घटक है जो आइटमों की एक सूची प्रदर्शित करता है। जब उपयोगकर्ता किसी आइटम पर देर तक प्रेस करता है, तो एक अलर्ट संवाद प्रकट होता है, जिसमें पूछा जाता है कि उपयोगकर्ता आइटम को हटाना चाहता है या नहीं।

यहां बातचीत का विवरण दिया गया है:

1. ListBox (पैरेंट) आइटम प्रस्तुत करता है और आवश्यक प्रॉप्स और कॉलबैक को AlertComponent (चाइल्ड) को भेजता है।

import React, { useState } from 'react';
import AlertComponent from './AlertComponent';

const ListBox = () => {
  const [showComponent, setShowComponent] = useState(false);

  const alertAction = async () => {
    setShowComponent(!showComponent);
  };

  return (
    

      

        
Item 1
        {/* Other list items */}
      

      {/* Passing props to the child component */}
       {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}

      />
    
  );
};

export default ListBox;

1. AlertComponent शीर्षक, विवरण और कॉलबैक जैसे प्रॉप्स को स्वीकार करता है जैसे onAccept, onCancel, और एक राज्य बदलने वाला प्रॉप showComponent.

export const AlertComponent: = ({ title, description, 
onAccept, onCancel, showComponent }) => {
return (
... rest of the code
)
}

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

showComponent एक कॉलबैक के रूप में काम कर रहा है क्योंकि यह उस स्थिति को बनाए रखता है जो AlertComponent

जब भी Reject दबाया जाता है, तो यह कॉलबैक शोकंपोनेंट की वर्तमान स्थिति को चालू कर देगा।

 {
          alert('Item Deleted');
          setShowComponent(false);
        }}
        onCancel={() => setShowComponent(false)}
        showComponent={alertAction}
      />

इस तरह से प्रॉप्स और कॉलबैक का उपयोग करने से रिएक्ट में पैरेंट और चाइल्ड घटकों के बीच डेटा का स्पष्ट प्रवाह संभव हो जाता है।

माता-पिता स्थिति को नियंत्रित कर सकते हैं और इसे बच्चे को दे सकते हैं, जबकि बच्चा उपयोगकर्ता द्वारा किए गए किसी भी बदलाव या कार्रवाई के बारे में माता-पिता को सूचित करने के लिए कॉलबैक के माध्यम से वापस संवाद कर सकता है।

यह उपयोगकर्ता इंटरैक्शन के जवाब में अलर्ट, मोडल या पॉप-अप दिखाने जैसे परिदृश्यों के लिए विशेष रूप से उपयोगी है।

निर्माण जारी रखें!