استخدام Context API في React لإنشاء سمة تطبيق عمومية

مرحبًا ، هذه أول مشاركة لي على Habr. آمل أن تكونوا مهتمين.

لذلك ، أريد أن أبدأ سلسلة من المشاركات ذات الصلة المباشرة أو غير المباشرة بإنشاء مجموعة أدوات واجهة المستخدم.



الهدف من هذا React.js : البحث عن حل للتحكم في سمة التطبيق الذي يتم تطبيق React.js في React.js . سوف نستخدم موضوعين عالميين - الظلام والضوء .

في هذا المثال ، سوف أستخدم الوحدة النمطية create-react-context لإنشاء السياق.

نبدأ بإنشاء مجلد في جذر المشروع ( src / ) يسمى سياق السياق . ستبدو بنية هذا المجلد كما يلي:

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

أنا شخصياً أبدأ دائمًا بملف index.js . أنت تفعل كل الواردات والصادرات في البداية ، ثم رأسك لا يضر بها.

theme-context / index.js

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

theme-context / ThemeConsumer / index.js

 export { ThemeConsumer } from './ThemeConsumer'; 

theme-context / ThemeProvider / index.js

 export { ThemeProvider } from './ThemeProvider'; 

theme-context / context.js

بعد ذلك ، سنقوم بإنشاء سياق باستخدام createContext (آسف للتورية) ، باستخدام الوحدة النمطية من هنا .

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

قم باستيراد createContext ، createContext بتدميره إلى Provider createContext ، createContext .

theme-context / constants.js

كل شيء بسيط هنا ، نقوم بإنشاء المتغيرات الخاصة بنا حتى لا تلوث الملفات الرئيسية.

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

كما قلت سابقًا ، سيكون لتطبيقنا موضوعان - الضوء والظلام.

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

theme-context / ThemeConsumer / ThemeConsumer.js

في هذا الملف ، سنعمل مع المستهلك - هذا مكون "يستمع ، ينتظر" لتغيير في السياق. الطفل من هذا المكون هو وظيفة. هذا أمر لا بد منه عند استخدام Consumer .

تستقبل هذه الوظيفة قيم السياق الحالي وتُرجع React Node ، بمعنى آخر ، مكون.

من الوثائق: ستكون قيمة الوسيطة (في حالتنا {theme => / * لتصور شيء يستند إلى قيمة السياق * /}) مساوية لسمة props theme بأقرب أصل في شجرة Provider لهذا السياق.

 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 المكون تلقائيًا ، لذلك يمكنني استخدام lodash من 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 /> ، هذا هو ، وسيخلق <MyComponent /> موضوع تطبيقنا. ولديك بالفعل موضوع كوسيطة:

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

يمكننا استخدامه عند إنشاء مكون

  const renderMyComponent = theme => { //      }; 

يمكن العثور على رمز العمل هنا .

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

شكرا لك