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

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

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

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

App.jsximport BigBox from './BigBox';

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

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

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

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

App.jsximport './styles.css';

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

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

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

BigBox.jsximport MiddleBox from './MiddleBox';

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

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

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

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

MiddleBox.jsximport SmallBox from './SmallBox';

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

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

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

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

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

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

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

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

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

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

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

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