شرح صفوف ومحتوى الفقرة
لاختيار الأسلوب الأنسب عند تصميم واجهة المكون، اعتمد خاصية children عندما يمتلك الغلاف منطقة محتوى رئيسية واحدة بديهية، وأضف خصائص منافذ مسماة مثل header وactions عندما ينسق التخطيط منطقتين مستقلتين أو أكثر. يوضح الجدول التالي متى تختار كل نمط:
| نمط التركيب | توقيع الخصائص المعتاد | سيناريو التخطيط المثالي |
|---|---|---|
| منفذ تغليف مفرد | function Card({ children }) | البطاقات العامة وصناديق التنبيه وحاويات الأقسام |
| تخطيط متعدد المنافذ | function Shell({ header, sidebar, children }) | قوالب الصفحات والنوافذ المزودة بشريط أزرار مستقل |
| غلاف التخصيص المشتق | function ErrorAlert({ children }) | نسخ مهيأة مسبقاً تغلّف مكوناً أساسياً عاماً |
| وراثة الأصناف البرمجية | متروكة كلياً في React الحديثة | لا تُستخدم أبداً — استُبدلت بنسبة 100% بالتركيب والخصائص |
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس مفهوم تركيب المكونات في React، وبنيت حاويات مرنة بخاصية children، ونظمت التخطيطات متعددة المناطق عبر منافذ JSX المسماة، وطبقت التخصيص بالتركيب دون أي وراثة أصناف. الخطوة التالية: انتقل الآن إلى الدرس رقم 12 «العرض الشرطي للعناصر في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.