مثال رقم 2 يوضح كيفية استخدام Context، createContext، و useContext في React

- أكتوبر 10, 2024

سأقدم لك مثالاً آخر يوضح كيفية تمرير البيانات من الجد إلى الحفيد باستخدام Context، createContext، و useContext في React. سنقوم بإنشاء ثلاثة مكونات مستقلة: App (الجد)، Parent (الأب)، و Child (الحفيد).

1. إنشاء السياق (Context)

أولاً، سنقوم بإنشاء سياق جديد باستخدام createContext.

import React, { createContext, useContext } from 'react';

// إنشاء السياق
const MyContext = createContext();

2. مكون App (الجد)

مكون `App` سيكون هو الجد الذي يوفر القيمة للسياق.

const App = () => {
const value = 'Hello from Grandpa!';

return (
// استخدام Provider لتمرير القيمة إلى الشجرة التالية
<MyContext.Provider value={value}>
<Parent />
</MyContext.Provider>
);
};

export default App;

3. مكون Parent (الأب)

مكون `Parent` هو الأب الذي لا يحتاج إلى تمرير القيمة بنفسه، بل سيقوم فقط بعرض مكون `Child`.

const Parent = () => {
return (
<div>
<h2>I am the Parent</h2>
<Child />
</div>
);
};

export default Parent;

4. مكون Child (الحفيد)

مكون `Child` هو الحفيد الذي سيستهلك القيمة من السياق باستخدام `useContext`.

const Child = () => {
// استخدام useContext للحصول على القيمة من السياق
const value = useContext(MyContext);

return (
<div>
<h3>I am the Child</h3>
<p>{value}</p>
</div>
);
};

export default Child;

الشرح

إنشاء السياق: قمنا بإنشاء سياق باستخدام `createContext` وأسميناه `MyContext`.
مكون App (الجد): في هذا المكون، قمنا بإنشاء قيمة `value` ومررناها إلى `MyContext.Provider`، مما يجعل هذه القيمة متاحة لجميع المكونات الفرعية.
مكون Parent (الأب): هذا المكون يعرض فقط مكون `Child` ولا يحتاج إلى تمرير القيمة بنفسه.
مكون Child (الحفيد): في هذا المكون، استخدمنا `useContext` للحصول على القيمة من `MyContext` وعرضناها داخل عنصر `p`.

بهذا الشكل، يمكننا تمرير البيانات من الجد إلى الحفيد بدون الحاجة إلى تمريرها عبر كل مستوى من المكونات.

بحث هذه المدونة الإلكترونية

مدونة أحمد زعـــــــــكان