كيفية تغيير قيمة السياق (Context) في React

 

مشكلة تغيير قيمة السياق

عند إنشاء سياق باستخدام createContext، يمكنك تحديد قيمة افتراضية:

const ThemeContext = createContext('light');

هذه القيمة الافتراضية لا تتغير. React يستخدم هذه القيمة فقط كملاذ أخير إذا لم يجد مزود سياق (Provider) مطابق في الشجرة فوق المكون الذي يقرأ السياق.

كيفية جعل قيمة السياق تتغير بمرور الوقت

لتغيير قيمة السياق بمرور الوقت، يجب إضافة حالة (state) وتغليف المكونات في مزود سياق (Context Provider).

خطوات الحل

1. إنشاء حالة (state): استخدم useState لإنشاء حالة يمكن تغييرها.
2. تغليف المكونات في مزود سياق: استخدم Provider لتوفير قيمة السياق الديناميكية.

مثال عملي

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

import { createContext, useState } from 'react'; // إنشاء السياق مع قيمة افتراضية const ThemeContext = createContext('light'); const AuthContext = createContext(null);

2. مكون App

function App() {   const [theme, setTheme] = useState('dark');   const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });   return (     <ThemeContext.Provider value={theme}>       <AuthContext.Provider value={currentUser}>         <Page />       </AuthContext.Provider>     </ThemeContext.Provider>   ); }

الشرح

1. إنشاء حالة (state): قمنا بإنشاء حالتين theme و currentUser باستخدام useState.
2. تغليف المكونات في مزود سياق: استخدمنا ThemeContext.Provider و AuthContext.Provider لتوفير القيم الديناميكية للمكونات الفرعية.

قراءة وتغيير قيمة السياق

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

يمكنك قراءة قيمة السياق باستخدام useContext:

function Button() {   const theme = useContext(ThemeContext);   return <button className={theme}>Button</button>; }

2. تغيير قيمة السياق

لتغيير قيمة السياق، يمكنك استخدام الدالة المخصصة لتغيير الحالة (setState):

function ThemeSwitcher() {   const [theme, setTheme] = useContext(ThemeContext);   return (     <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>       Switch Theme     </button>   ); }

الشرح التفصيلي

1. قراءة قيمة السياق: استخدمنا useContext لقراءة قيمة السياق في مكون Button.
2. تغيير قيمة السياق: استخدمنا useContext لقراءة وتغيير قيمة السياق في مكون ThemeSwitcher.

بهذا الشكل، يمكنك تغيير قيمة السياق بمرور الوقت وجعلها ديناميكية.