एक वैश्विक अनुप्रयोग विषय बनाने के लिए प्रतिक्रिया में प्रसंग एपीआई का उपयोग करना

नमस्ते, यह मेरी पहली पोस्ट है। मुझे आशा है कि आप रुचि लेंगे।

इसलिए, मैं सीधे या परोक्ष रूप से यूआई-किट के निर्माण से संबंधित पदों की एक श्रृंखला शुरू करना चाहता हूं।



इस पोस्ट का उद्देश्य: किसी एप्लिकेशन के विषय को नियंत्रित करने के लिए एक समाधान खोजें, जिसके घटक React.js में कार्यान्वित किए React.js । हम दो वैश्विक विषयों - अंधेरे और प्रकाश का उपयोग करेंगे।

इस उदाहरण में, मैं create-react-context लिए create-react-context मॉड्यूल का उपयोग करूंगा।

हम प्रोजेक्ट के मूल में एक फ़ोल्डर बनाकर शुरू करते हैं ( src / ) जिसे विषय-संदर्भ कहा जाता है । इस फ़ोल्डर की संरचना इस तरह दिखाई देगी:

 theme-context/ ThemeConsumer/ ThemeConsumer.js index.js ThemeProvider/ ThemeProvider.js index.js constants.js context.js index.js 

व्यक्तिगत रूप से, मैं हमेशा index.js फ़ाइल से शुरू करता हूं। आप शुरुआत में सभी आयात और निर्यात करते हैं, और फिर आपका सिर उनके बारे में चोट नहीं करता है।

विषय-संदर्भ / index.js

 export { ThemeProvider } from './ThemeProvider'; export { ThemeConsumer } from './ThemeConsumer'; 

विषय-संदर्भ / थीमकॉंसर / इंडेक्स। जेएस

 export { ThemeConsumer } from './ThemeConsumer'; 

विषय-संदर्भ / ThemeProvider / index.js

 export { ThemeProvider } from './ThemeProvider'; 

विषय-प्रसंग / संदर्भ.जेएस

अगला, हम यहाँ से मॉड्यूल का उपयोग करके createContext ( createContext लिए क्षमा करें) का उपयोग करते हुए एक संदर्भ createContext ।

 import createContext from 'create-react-context'; const { Provider, Consumer } = createContext(); export { Provider, Consumer }; 

createContext आयात createContext , इसे Provider और Consumer में नष्ट करें, और उन्हें निर्यात करें।

विषय-संदर्भ / constants.js

यहां सब कुछ सरल है, हम अपने चर बनाते हैं ताकि मुख्य फ़ाइलों को प्रदूषित न करें।

 export const themeLight = 'light'; export const themeDark = 'dark'; export const defaultTheme = themeLight; export const themes = [themeLight, themeDark]; 

जैसा कि मैंने पहले कहा था, हमारे आवेदन के दो विषय होंगे - प्रकाश और अंधेरा।

विषय-प्रसंग / ThemeProvider / ThemeProvider.js

यहां हम प्रदाता के बारे में बात करेंगे - वह घटक जो प्रत्येक React.Context ऑब्जेक्ट में उपलब्ध है। यह उपभोक्ताओं को बदलते संदर्भों को सुनने और प्रतिक्रिया करने की अनुमति देता है।

हमारे उदाहरण में, प्रस्ताव एक theme जिसे इस Provider सभी प्रवाह को हस्तांतरित किया जाएगा।

 import React from 'react'; import { Provider } from '../context'; import { defaultTheme, themes } from '../constants'; function ThemeProvider({ theme, children }) { return <Provider value={theme}>{children}</Provider>; } export { ThemeProvider }; 

विषय-प्रसंग / ThemeConsumer / ThemeConsumer.js

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

यह फ़ंक्शन वर्तमान संदर्भ के मूल्यों को प्राप्त करता है और एक React Node देता है, दूसरे शब्दों में, एक घटक।

प्रलेखन से: तर्क का मूल्य (हमारे मामले में {विषय => / * संदर्भ मूल्य के आधार पर कुछ कल्पना करने के लिए * /}) इस संदर्भ के लिए Provider पेड़ में निकटतम माता-पिता के सहारा theme बराबर होगा।

 import React from 'react'; import { defaultTo } from 'lodash'; import { Consumer } from '../context'; import { defaultTheme, themes } from '../constants'; function ThemeConsumer(props) { return <Consumer>{theme => props.children(defaultTo(theme, props.defaultTheme))}</Consumer>; } export { ThemeConsumer }; 

यहाँ यह निम्नलिखित पर ध्यान देने योग्य है:
यदि विषय को स्पष्ट रूप से नहीं चुना गया था, तो हमें स्वचालित रूप से चयनित होने के लिए घटक विषय की आवश्यकता होती है, इसके लिए मैं lodash - defaultTo से lodash उपयोग करता defaultTo । हालांकि, यह कार्यक्षमता कई अन्य तरीकों से प्राप्त की जा सकती है।

यह सब, विषय संदर्भ का उपयोग करने के लिए तैयार है!

आइए देखें कि इसे कैसे लागू किया जाए। आइए एक सरल घटक बनाएं जो हमारे आवेदन के संदर्भ को सुनेगा और प्रतिक्रिया देगा।

 .my-class { font-family: sans-serif; text-align: center; font-size: 30px; } .my-class-light { color: #39cccc; } .my-class-dark { color: #001a33; } 

 import React from "react"; import ReactDOM from "react-dom"; import cx from "classnames"; import { ThemeConsumer, ThemeProvider } from "./theme-context"; import "./styles.css"; function MyComponent() { const renderMyComponent = theme => { const myComponentClassName = cx("my-class", { "my-class-dark": theme === "dark", "my-class-light": theme === "light" }); return ( <div className={myComponentClassName}> <h1>    </h1> </div> ); }; return <ThemeConsumer>{theme => renderMyComponent(theme)}</ThemeConsumer>; }; function App() { return ( <MyComponent /> ); } const rootElement = document.getElementById("root"); ReactDOM.render( //      theme  dark <ThemeProvider theme="light"> <App /> </ThemeProvider> , rootElement); 

इसलिए, हमने प्रदाता में अपना <App /> लपेट दिया है, और अब यह थीम हमारे एप्लिकेशन के सभी घटकों-उपभोक्ताओं के लिए उपलब्ध हो गई है। अगला, <App /> रिटर्न <MyComponent /> , यह , और यह हमारा कंपोनेंट बनाएगा और इसे हमारे एप्लिकेशन की थीम पास करेगा। और पहले से ही एक तर्क के रूप में एक विषय है:

 <ThemeConsumer>{theme => renderMyComponent(theme)}</ThemeConsumer> 

घटक बनाते समय हम इसका उपयोग कर सकते हैं

  const renderMyComponent = theme => { //      }; 

कार्य कोड यहां पाया जा सकता है ।

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

आपका धन्यवाद