राज्य को ऊपर उठाना: बच्चे के घटक माता-पिता के साथ कैसे संवाद करते हैं

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

जानें कि किसी चाइल्ड घटक को मूल घटक को डेटा भेजने की अनुमति देने के लिए राज्य को कैसे उठाया जाए।

प्रतिक्रिया में घटक

रिएक्ट घटकों को एक पदानुक्रम में व्यवस्थित करता है जहां बाल घटक मूल घटकों के अंदर घोंसला बनाते हैं। यह पदानुक्रम एप्लिकेशन के उपयोगकर्ता इंटरफ़ेस के निर्माण खंड बनाता है।

</ParentComponent>

प्रत्येक चाइल्ड घटक अपने मूल घटक से डेटा प्राप्त करता है, जिसे प्रॉप्स के रूप में जाना जाता है। रिएक्ट प्रॉप्स विभिन्न प्रकार के डेटा जैसे कि ऐरे, ऑब्जेक्ट, स्ट्रिंग्स या यहां तक ​​​​कि फ़ंक्शंस को पकड़ सकता है। चाइल्ड घटक इस डेटा में सीधे हेरफेर नहीं कर सकता है।

निम्नलिखित घटक पर विचार करें, जिसे कहा जाता है काउंटरबटन:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

घटक नाम का एक राज्य मान बनाए रखता है गिनती करना जो हर बार उपयोगकर्ता द्वारा बटन क्लिक करने पर बढ़ जाता है।

मान लीजिए कि आपने काउंटरबटन घटक को होम नाम के किसी अन्य घटक में नेस्ट किया है:

const Home = () => {
return (

 )
}

यदि आप से गिनती मान प्रदर्शित करना चाहते हैं काउंटरबटन होम घटक के अंदर घटक, आपको एक चुनौती का सामना करना पड़ेगा।

जैसा कि उल्लेख किया गया है, रिएक्ट माता-पिता से बच्चे तक एक यूनिडायरेक्शनल डेटा प्रवाह को लागू करता है। इसलिए, काउंटरबटन घटक सीधे होम घटक के साथ गिनती स्थिति मान साझा नहीं कर सकता है।

इससे निजात पाने के लिए आपको राज्य को ऊपर उठाना होगा।

घटकों के बीच डेटा साझा करने के लिए राज्य को ऊपर कैसे उठाएं

लिफ्टिंग स्थिति से तात्पर्य किसी घटक की स्थिति को घटक वृक्ष से ऊपर, मूल घटक तक ले जाना है। एक बार जब आप राज्य उठा लेते हैं, तो आप इसे प्रोप मान के रूप में चाइल्ड घटकों को पास कर सकते हैं।

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

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

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

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

राज्य को उठाना डेटा को केंद्रीकृत करता है और जिम्मेदारी को स्थानांतरित करता है राज्य का प्रबंधन बच्चे से माता-पिता तक.

मूल घटक में डेटा प्रदर्शित करने में आपकी मदद करने के अलावा, स्थिति को उठाने से आपको कई घटकों में डेटा को सिंक्रनाइज़ करने में मदद मिल सकती है।

मान लीजिए, आपके पास मूल घटक के अंदर एक हेडर और फ़ूटर घटक है और इनमें से प्रत्येक घटक साझा गिनती भी प्रदर्शित करता है। इस मान को साझा करने के लिए, आप इसे इन घटकों को प्रॉप्स के रूप में पास कर सकते हैं।

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

हालाँकि, आपको स्थिति को उठाने में सावधानी बरतने की ज़रूरत है ताकि प्रोप ड्रिलिंग जैसी स्थिति में न पहुँच जाएँ।

प्रोप ड्रिलिंग चैलेंज

जैसे-जैसे आपका एप्लिकेशन बढ़ता है, आप पाएंगे कि घटक ट्री में गहरे कई घटकों को एक साझा स्थिति तक पहुंच की आवश्यकता है। इस साझा स्थिति को नेस्टेड घटकों के लिए उपलब्ध कराने के लिए, आपको मध्यस्थ घटकों के माध्यम से प्रॉप्स को पारित करने की आवश्यकता होगी। इस प्रक्रिया से प्रोप ड्रिलिंग हो सकती है।

प्रोप ड्रिलिंग से यह ट्रैक करना मुश्किल हो जाता है कि डेटा कैसे प्रवाहित होता है और कोड को बनाए रखना कठिन हो सकता है।

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

प्रॉप्स का उपयोग करके रिएक्ट में डेटा साझा करना

जब आपको किसी चाइल्ड घटक से उसके मूल घटक के साथ डेटा साझा करने की आवश्यकता होती है, तो राज्य को मूल घटक तक बढ़ाएं, फिर उस फ़ंक्शन को पास करें जो राज्य को चाइल्ड घटक में प्रॉप्स के रूप में अपडेट करता है।

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