استخدام API Context في React لإنشاء تصميم استجابة سريع

مرحبًا ، هذه المقالة هي امتداد لهذا المنشور ، حيث قررت أن أبدأ سلسلة من الدروس الصغيرة حول إنشاء مجموعة أدوات واجهة المستخدم. يصف كيفية استخدام السياق لإنشاء سمة تطبيق. اليوم أريد أن أكمل التطبيق مع سياق آخر من شأنه أن يساعدنا في إظهار مكونات واجهة المستخدم ، بناءً على جهاز المستخدم.



في هذا المثال ، سوف أستخدم أيضًا وحدة create-react-context .

ستكون شجرة المهام مماثلة لتلك السابقة. لنقم بتسمية مجلد سياق الوسائط الجديد.

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

سنتعامل بسرعة مع الفهارس .

media-context / index.js

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

theme-context / MediaConsumer / index.js

 export { MediaConsumer } from './MediaConsumer'; 

موضوع السياق / MediaProvider / index.js

 export { MediaProvider } from './MediaProvider'; 

theme-context / context.js
كما كان من قبل ، قم بإنشاء createContext ( وحدة npm ).

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

نحن استيراد وتدمير وتصدير المكونات الناتجة.

وسائل الإعلام السياق / الثوابت
حفظ المتغيرات هنا.

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

في النهج التكيفي ، يستخدم المستخدم بشكل أساسي 4 أنواع من الأجهزة - سطح المكتب والكمبيوتر اللوحي والتطبيق المحمول والتطبيق الأصلي (الأصلي). الأجهزة الأخرى المحتملة: التلفزيون الذكي ، الساعة ، إلخ. في هذا المثال ، سنستخدم فقط الأجهزة المحمولة وسطح المكتب .

موضوع السياق / MediaProvider / MediaProvider.js
كما نعلم بالفعل ، يتوفر React.Context في React.Context ، والذي "يغذي" المستهلكين بالسياق. لأنها تتيح لهم الاستماع والاستجابة للسياقات المتغيرة.

الدعائم هي device touchable . اسمحوا لي أن أذكرك بأن جميع القيم التي تم تمريرها إلى مزود 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 }; 

theme-context / 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); 

لاستخدام مسابقة الوسائط ، نحتاج إلى كاشف وسائط (للحصول على معلومات حول جهاز المستخدم). لا يوجد كاشف للوسائط في تطبيقنا ، لذلك دعونا نأخذه من هنا - كشف رد فعل الجهاز ، أي علم isMobile .

كما هو الحال مع المحتوى السياقي ، سنقوم بتغطية مكون الاختبار الخاص بنا في مزود الوسائط. ستكون قيمة الدعائم التي ينقلها المزود إلى حسابه موضع حسد من جهاز العميل. ذهبت من هاتف محمول ، ونرسل نسخة محمولة للموقع ، من كمبيوتر سطح المكتب. يمكن العثور على رمز العمل هنا .

لمعرفة الفرق ، اتبع الرابط من سطح المكتب ومتصفح الجوال.

هذا كل شئ! يحتوي تطبيقنا الآن على سياقتين من شأنها أن تساعدنا على إنشاء مكونات أكثر مرونة ومرونة في مجموعة أدوات واجهة المستخدم. في المنشور التالي ، سأحاول إنشاء مكون معقد باستخدام كلا السياقين. أتمنى أن تجد المقال مفيدًا.

شكرا لك