انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: رفع الحالة للأعلى وهوية بقاء أو تصفير الحالة

Lifting State to Common Parent رفع الحالة إلى الأب المشترك

زامن المكونات الشقيقة برفع الحالة المشتركة إلى الأب الأقرب، وافهم كيف تربط React بقاء الحالة بموقع المكون في الشجرة ومتى تصفرها عمداً عبر خاصية key.
3 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

يُنفّذ رفع الحالة للأعلى (Lifting State Up) في ثلاث خطوات هندسية واضحة:

  1. إزالة متغير useState() المحلي من المكونات الأبناء.
  2. تمرير القيمة المشتركة نزولاً من أقرب أب مشترك عبر الخصائص مثل isActive={activeIndex === 0}.
  3. تمرير دالة معالجة حدث نزولاً مثل onShow={() => setActiveIndex(0)} ليطلب الابن من أبيه تحديث الحالة عند التفاعل.
الصف 2 كود برمجي
HTML 
function Accordion() {
  const [activeIdx, setActiveIdx] = useState(0);
  return (
    <>
      <Panel title="Overview" isActive={activeIdx === 0}
        onShow={() => setActiveIdx(0)} />
      <Panel title="Syllabus" isActive={activeIdx === 1}
        onShow={() => setActiveIdx(1)} />
    </>
  );
}
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (رفع الحالة للأعلى وهوية بقاء أو تصفير الحالة)