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

- أكتوبر 10, 2024

سأقدم لك مثالاً بسيطاً يوضح كيفية استخدام Context، createContext، و useContext في React. سنقوم بإنشاء ثلاثة مكونات مستقلة: App، UserProvider، و UserProfile.

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

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

// UserContext.js
import { createContext } from 'react';

// إنشاء سياق جديد
const UserContext = createContext(null);

export default UserContext;

2. المزود (Provider)

سنقوم بإنشاء مكون UserProvider الذي سيستخدم UserContext.Provider لتغليف المكونات التي تحتاج إلى الوصول إلى البيانات.

// UserProvider.js
import React, { useState } from 'react';
import UserContext from './UserContext';

const UserProvider = ({ children }) => {
// حالة المستخدم
const [user, setUser] = useState({ name: 'John Doe', age: 30 });

return (
// تغليف المكونات بـ UserContext.Provider وتمرير قيمة المستخدم
<UserContext.Provider value={user}>
{children}
</UserContext.Provider>
);
};

export default UserProvider;

3. المستهلك (Consumer)

سنقوم بإنشاء مكون UserProfile الذي سيستخدم useContext للوصول إلى البيانات المخزنة في السياق.

// UserProfile.js
import React, { useContext } from 'react';
import UserContext from './UserContext';

const UserProfile = () => {
// استخدام useContext للوصول إلى بيانات المستخدم
const user = useContext(UserContext);

return (
<div>
<h1>User Profile</h1>
<p>Name: {user.name}</p>
<p>Age: {user.age}</p>
</div>
);
};

export default UserProfile;

4. تجميع المكونات

أخيراً، سنقوم بتجميع كل المكونات في مكون App.

// App.js
import React from 'react';
import UserProvider from './UserProvider';
import UserProfile from './UserProfile';

const App = () => {
return (
// تغليف التطبيق بـ UserProvider
<UserProvider>
<UserProfile />
</UserProvider>
);
};

export default App;

شرح الكود

إنشاء السياق: قمنا بإنشاء سياق جديد باستخدام createContext في ملف UserContext.js.
المزود (Provider): قمنا بإنشاء مكون UserProvider الذي يستخدم UserContext.Provider لتغليف المكونات وتمرير بيانات المستخدم.
المستهلك (Consumer): قمنا بإنشاء مكون UserProfile الذي يستخدم useContext للوصول إلى بيانات المستخدم من السياق.
تجميع المكونات: في مكون App، قمنا بتغليف التطبيق بـ UserProvider واستخدام UserProfile لعرض بيانات المستخدم.

بهذا الشكل، يمكنك مشاركة البيانات بين مكونات متعددة بسهولة باستخدام Context، createContext، و useContext في React.

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

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