प्रतिक्रियाशील अनुप्रयोग डिज़ाइन बनाने के लिए प्रतिक्रिया में संदर्भ API का उपयोग करना

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



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

टास्क ट्री पिछले एक के समान होगा। नए मीडिया-संदर्भ फ़ोल्डर का नाम दें।

 media-context/ MediaConsumer/ MediaConsumer.js index.js MediaProvider/ MediaProvider.js index.js constants.js context.js index.js 

हम अनुक्रमणिका से शीघ्रता से निपटेंगे।

मीडिया-संदर्भ / index.js

 export { MediaProvider } from './MediaProvider'; export { MediaConsumer } from './MediaConsumer'; 

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

 export { MediaConsumer } from './MediaConsumer'; 

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

 export { MediaProvider } from './MediaProvider'; 

विषय-प्रसंग / संदर्भ.जेएस
पहले की तरह, createContext ( createContext मॉड्यूल ) बनाएं।

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

हम आयात, विनाश और परिणामी घटकों का निर्यात करते हैं।

मीडिया-संदर्भ / constants.js
यहां वैरिएबल सेव करें।

 export const devices = ["mobile", "tablet", "desktop", "native"]; export const defaultDevice = "mobile"; 

एक अनुकूली दृष्टिकोण में, उपयोगकर्ता मुख्य रूप से 4 प्रकार के उपकरणों का उपयोग करता है - डेस्कटॉप, टैबलेट, मोबाइल और मूल एप्लिकेशन (मूल)। अन्य संभावित उपकरण: स्मार्ट टीवी, घड़ी आदि। इस उदाहरण में, हम केवल मोबाइल और डेस्कटॉप का उपयोग करेंगे।

विषय-संदर्भ / MediaProvider / MediaProvider.js
जैसा कि हम पहले से ही जानते हैं, प्रदाता React.Context में उपलब्ध है, जो उपभोक्ताओं को संदर्भ के साथ "फीड" करता है। यह उन्हें बदलते संदर्भों को सुनने और प्रतिक्रिया देने की अनुमति देता है।

प्रॉप्स device और touchable । आपको याद दिलाता हूं कि value प्रदाता को दिए गए सभी value उपभोक्ताओं के लिए उपलब्ध हो जाएंगे।

 import React from "react"; import PropTypes from "prop-types"; import { Provider } from "../context"; import { devices, defaultDevice } from "../constanst"; function MediaProvider(props) { const device = devices.includes(props.device) ? props.device : props.defaultDevice; return <Provider value={{ ...props, device }}>{props.children}</Provider>; } MediaProvider.propTypes = { device: PropTypes.oneOf(devices), touchable: false, children: PropTypes.node }; MediaProvider.defaultProps = { device: defaultDevice, touchable: false }; export { MediaProvider }; 

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

उपभोक्ता की कार्यक्षमता का विवरण पिछले लेख में पाया जा सकता है, लेकिन संक्षेप में, Consumer संदर्भ के प्रति प्रतिक्रिया करता है और एक नया घटक देता है।

इस मामले में, हम children को दो पैरामीटर पास करते हैं: डिवाइस का प्रकार और क्या डिवाइस स्पर्श-संवेदनशील है।

 import React from "react"; import PropTypes from "prop-types"; import { defaultTo } from "lodash"; import { devices, defaultDevice } from "../constanst"; import { Consumer } from '../context'; function MediaConsumer(props) { return ( <Consumer> {media => props.children({ touchable: defaultTo(media.touchable, props.defaultTouchable), device: defaultTo(media.device, props.defaultDevice), })} </Consumer> ) } MediaConsumer.propTypes = { defaultTouchable: PropTypes.bool, defaultDevice: PropTypes.oneOf(devices), children: PropTypes.func.isRequired }; MediaConsumer.defaultProps = { defaultDevice, defaultTouchable: false }; export { MediaConsumer }; 

अब हमारे आवेदन में एक नया संदर्भ उपलब्ध है, आइए इसका उपयोग करें।

 import React from "react"; import ReactDOM from "react-dom"; import { isMobile } from "react-device-detect"; import cx from "classnames"; import { ThemeConsumer, ThemeProvider } from "./theme-context"; import { MediaConsumer, MediaProvider } from "./media-context"; import "./styles.css"; function renderSVG({ device, touchable }) { if (device === "mobile" && touchable) { return "https://image.flaticon.com/icons/svg/124/124114.svg"; } if (device === "tablet" && touchable) { return "https://image.flaticon.com/icons/svg/124/124099.svg"; } if (device === "desktop") { return "https://image.flaticon.com/icons/svg/124/124092.svg"; } } function MyComponent() { const renderMyComponent = (theme, media) => { const myComponentClassName = cx("my-class", { "my-class-dark": theme === "dark", "my-class-light": theme === "light" }); return ( <div className="wrapperDiv"> <object className={myComponentClassName} data={renderSVG(media)} type="image/svg+xml" /> </div> ); }; return ( <MediaConsumer> {media => ( <ThemeConsumer> {theme => renderMyComponent(theme, media)} </ThemeConsumer> )} </MediaConsumer> ); } function App() { return ( <MediaProvider device={isMobile ? "mobile" : "desktop"} touchable={isMobile} > <ThemeProvider theme="light"> <MyComponent /> </ThemeProvider> </MediaProvider> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

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

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

अंतर देखने के लिए, डेस्कटॉप और मोबाइल ब्राउज़र से लिंक का अनुसरण करें।

वह सब है! अब हमारे आवेदन में दो संदर्भ हैं जो हमें अपने यूआई-किट में अधिक बहुमुखी और लचीले घटक बनाने में मदद करेंगे। अगली पोस्ट में मैं दोनों संदर्भों का उपयोग करके एक जटिल घटक बनाने की कोशिश करूँगा। मुझे उम्मीद है कि आपको लेख उपयोगी लगा होगा।

आपका धन्यवाद