مشاركة البيانات عبر useOutletContext | المسارات المتداخلة والتخطيطات المشتركة عبر Outlet

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

كثيراً ما يمتلك قالب التخطيط الأب بيانات أو دوال مشتركة تحتاجها مساراته الفرعية المباشرة، مثل باقة الاشتراك الحالية أو زر تبديل العرض. بدلاً من إنشاء ملف سياق عام كامل من أجل تخطيط واحد، مرر القيمة مباشرة عبر خاصية <Outlet context={value} /> في الأب، واقرأها داخل أي مسار فرعي بخطاف useOutletContext().

الصف 2 كود برمجي

HTML

function StudioShell() {
  const [tier, setTier] = useState('Starter');
  return <Outlet context={{ tier, setTier }} />;
}
function BillingChild() {
  const { tier, setTier } = useOutletContext();
  return (
    <button onClick={() => setTier('Pro')}>
      {tier}
    </button>
  );
}

جرّب بنفسك

الصف 3 ملاحظة هامة

Sharing Layout Outlet Context مشاركة البيانات عبر useOutletContext

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (المسارات المتداخلة والتخطيطات المشتركة عبر Outlet)