مشاركة قيمة بين المكونات بإستخدام Context

ال Context بتسمح لمكون داخلي يقرأ قيمة من أقرب Provider فوقه

المثال داخل مشروع React يدعم JSX و Hooks

تطبيق الفكرة

بنمرر الثيم من الأب والابن بيقرأه عن طريق useContext

ملف App.jsx

import { createContext, useContext, useState } from "react";
const ThemeContext = createContext("light");
function Label() {
  const theme = useContext(ThemeContext);
  return <p>{theme}</p>;
}
export default function App() {
  const [theme, setTheme] = useState("light");
  return <ThemeContext.Provider value={theme}><Label /><button onClick={() => setTheme("dark")}>Dark</button></ThemeContext.Provider>;
}

النتيجة

المكون الداخلي بيعرض light ثم dark بعد الضغط