React में useContext कॉन्टेक्स्ट हुक

इस पाठ में हम कॉन्टेक्स्ट के साथ काम जारी रखेंगे। अब कॉम्पोनेंट्स का एक ट्री बनाएंगे। शुरुआत के लिए एक अलग फाइल में React कॉम्पोनेंट BigBox बनाएं:

function BigBox() {
	return (
		<p>bigbox</p>
	);
}

इसे इम्पोर्ट करें और अपने मुख्य कॉम्पोनेंट App में रखें:

import BigBox from './BigBox';

function App() {
	return (
		<BigBox />
	);
}

अधिक स्पष्टता के लिए डिव्स को थोड़ा स्टाइल दें। इसके लिए फाइल styles.css बनाएं:

div {
	border: 1px solid blue;
	margin: 10px;
	text-align: center;
	max-width: 300px;
}

इसे App.js में इम्पोर्ट करना न भूलें:

import './styles.css';

अब एक अलग फाइल में कॉम्पोनेंट MiddleBox बनाएं:

function MiddleBox() {
	return (
		<p>middlebox</p>
	);
}

और इसे बड़े बॉक्स BigBox में रखें:

import MiddleBox from './MiddleBox';

function BigBox() {
	return (
		<div>
			<MiddleBox />
		</div>
	);
}

छोटे बॉक्स SmallBox के साथ भी यही सब करें:

function SmallBox() {
	return (
		<p>मैं ... हूं</p>
	);
}

MiddleBox में दो ऐसे बॉक्स रखें:

import SmallBox from './SmallBox';

function MiddleBox() {
	return (
		<div>
			<SmallBox />
			<SmallBox />
		</div>
	);
}

हमने ट्री बना लिया। और अब हम चाहते हैं कि हमारा App, SmallBox में स्ट्रिंग वैल्यू 'small box :)' पास करे, प्रॉप्स का उपयोग किए बिना, कॉन्टेक्स्ट का उपयोग करके (अचानक हमारा बॉक्स एप्लिकेशन विशाल आकार का हो जाए)।

कॉन्टेक्स्ट वाली फाइल MyContext.js हम पहले ही बना चुके हैं और पिछले पाठ में कनेक्ट कर चुके हैं।

अगला कदम जो हम करेंगे - BigBox को कॉन्टेक्स्ट प्रोवाइडर में लपेटेंगे, जो हमारे कॉन्टेक्स्ट ऑब्जेक्ट MyContext की एक प्रॉपर्टी है। अब इस कंस्ट्रक्शन में enclosed सभी कॉम्पोनेंट्स (और यह BigBox में नेस्टेड सभी बॉक्स भी हैं) कॉन्टेक्स्ट तक पहुंच प्राप्त कर सकेंगे और उसमें परिवर्तनों की सदस्यता ले सकेंगे। कॉन्टेक्स्ट के वैल्यू के रूप में हम वांछित 'small box :)' पास करते हैं:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
		</MyContext.Provider>
	);
}

और अब कॉन्टेक्स्ट वैल्यू को पढ़ना बाकी है। हम इसे SmallBox में उपयोग करना चाहते थे, इसलिए वहां कॉन्टेक्स्ट फाइल MyContext.js और हुक useContext इम्पोर्ट करें:

import { useContext } from 'react';
import { MyContext } from './MyContext.js';

useContext की मदद से कॉन्टेक्स्ट वैल्यू को वेरिएबल name में पढ़ें:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>मैं ... हूं</p>
		</div>
	);
}

हमने SmallBox को इस कॉन्टेक्स्ट की सदस्यता दिला दी है और, यदि यह बदलता है, तो यह कॉम्पोनेंट भी अपडेट हो जाएगा।

और, अंत में, वेरिएबल name का वैल्यू तीन बिंदुओं (...) के स्थान पर रखें:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>मैं {name} हूं</p>
		</div>
	);
}

खाली कॉम्पोनेंट App में कॉम्पोनेंट Parent बनाएं, और उसमें कॉम्पोनेंट Daughter, और Daughter में कॉम्पोनेंट Grandson बनाएं। कॉन्टेक्स्ट का उपयोग करके, App से उम्र का वैल्यू 42 पास करें, और useContext की मदद से इसे कॉम्पोनेंट Daughter में डिस्प्ले करें।

और अब कॉम्पोनेंट Grandson में उम्र का वैल्यू डिस्प्ले करें, लेकिन 2 से विभाजित करके।