شرح صفوف ومحتوى الفقرة
يسير العمل بالسياق في React دائماً وفق ثلاث خطوات مترابطة:
- إنشاء السياق: استدعاء
createContext('USD')خارج دوال المكونات في نطاق الملف مع تمرير قيمة افتراضية احتياطية منطقية. - توفير القيمة للشجرة: تغليف الجزء المستهدف من الواجهة بالمزود
<CurrencyContext.Provider value={...}>لبث القيمة لأسفل. - قراءة القيمة: استدعاء خطاف
useContext(CurrencyContext)داخل أي مكون فرعي يحتاجها.
HTML
import { createContext, useContext } from 'react';
const CurrencyContext = createContext('USD');
function PriceTag() {
const code = useContext(CurrencyContext);
return <span>Currency: {code}</span>;
}