الخطوات الأساسية
- إنشاء السياق باستخدام
createContext. - توفير قيمة السياق باستخدام
Provider. - قراءة قيمة السياق باستخدام
useContext.
مثال عملي
1. إنشاء السياق
أولاً، نقوم بإنشاء سياق جديد باستخدام createContext.
// ThemeContext.js
import { createContext } from 'react';
export const ThemeContext = createContext('light');
|
2. توفير قيمة السياق
نقوم بلف المكونات في Provider لتوفير قيمة السياق.
// App.js
import React, { useState } from 'react';
import { ThemeContext } from './ThemeContext';
import Page from './Page';
function App() {
const [theme, setTheme] = useState('dark');
const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
};
return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<Page />
</ThemeContext.Provider>
);
}
export default App;
|
3. قراءة قيمة السياق
نستخدم useContext لقراءة قيمة السياق في مكون فرعي.
// Button.js
import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
function Button() {
const { theme, toggleTheme } = useContext(ThemeContext);
return <button className={theme} onClick={toggleTheme}>Click me</button>;
}
export default Button;
|
4. استخدام المكونات
نقوم بدمج المكونات معًا.
// Page.js
import React from 'react';
import Button from './Button';
function Page() {
return (
<div>
<h1>Welcome to the themed page!</h1>
<Button />
</div>
);
}
export default Page;
|
شرح المثال
- ThemeContext.js: نقوم بإنشاء سياق جديد بقيمة افتراضية ‘light’.
- App.js: نستخدم
ThemeContext.Provider لتوفير قيمة السياق ‘dark’ لجميع المكونات داخل Page. - Button.js: نستخدم
useContext لقراءة قيمة السياق وتطبيقها على زر. - Page.js: نعرض مكون
Button داخل صفحة.
بهذا الشكل، يمكننا تمرير البيانات بين المكونات بسهولة باستخدام createContext و useContext.
مثال على CSS لتوضيح التغيير
يمكنك إضافة بعض الأنماط لتوضيح التغيير بشكل أفضل:
/* styles.css */
button.dark {
background-color: black;
color: white;
}
button.light {
background-color: white;
color: black;
}
|
تعليقات
إرسال تعليق