مثالًا آخر يوضح كيفية استخدام createContext و useContext لتمرير البيانات بين المكونات في React.

- أكتوبر 12, 2024

مثال عملي: إدارة حالة المستخدم

1. إنشاء السياق

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

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

export const UserContext = createContext(null);

2. توفير قيمة السياق

نقوم بلف المكونات في Provider لتوفير قيمة السياق.

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

function App() {
const [user, setUser] = useState({ name: 'John Doe', age: 30 });

return (
<UserContext.Provider value={user}>
<UserProfile />
</UserContext.Provider>
);
}

export default App;

3. قراءة قيمة السياق

نستخدم useContext لقراءة قيمة السياق في مكون فرعي.

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

function UserProfile() {
const user = useContext(UserContext);
return (
<div>
<h1>User Profile</h1>
<p>Name: {user.name}</p>
<p>Age: {user.age}</p>
</div>
);
}

export default UserProfile;

شرح الكود

UserContext.js: نقوم بإنشاء سياق جديد لإدارة حالة المستخدم.
App.js: نستخدم UserContext.Provider لتوفير قيمة السياق لجميع المكونات داخل UserProfile.
UserProfile.js: نستخدم useContext لقراءة قيمة السياق وعرض معلومات المستخدم.

النتيجة

عند تشغيل التطبيق، سيعرض مكون UserProfile معلومات المستخدم (الاسم والعمر) التي تم توفيرها من خلال السياق. إذا قمت بتغيير قيمة المستخدم في App.js، ستنعكس هذه التغييرات في UserProfile تلقائيًا.

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

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