في هذا الدرس 6تصفّح المواضيع
في لغة HTML القياسية، تحتضن وسوم الحاويات مثل <article> و<section> أي عناصر نضعها بداخلها دون أن تفرض مسبقاً إن كانت فقرات نصية أم صوراً أم قوائم. يمنحنا تركيب المكونات (Component Composition) هذه المرونة ذاتها في React عبر تجميع شاشات متكاملة بتداخل مكونات صغيرة مستقلة داخل أغلفة تخطيط موحدة.
كلما وضعت عناصر بين وسمي الفتح والإغلاق لمكون مخصص مثل <SurfaceCard>...</SurfaceCard>، تمرر مكتبة React ذلك المحتوى تلقائياً داخل خاصية محجوزة باسم children. وبمجرد تفكيك { children } ووضعها داخل بنية الغلاف، يتحول المكون إلى حاوية قياسية تستقبل النصوص والصور والمكونات الفرعية بسلاسة.
function SurfaceCard({ children }) {
return <div className="rx-card">{children}</div>;
}
function App() {
return (
<SurfaceCard>
<h3>Workspace Ready</h3>
<p>Nested via children prop.</p>
</SurfaceCard>
);
}ماذا لو احتاج مكون التخطيط إلى أكثر من منطقة محتوى واحدة، كشريط رأس علوي ومنطقة وسطى وتذييل سفلي؟ بما أن عناصر JSX ما هي إلا كائنات JavaScript عادية، يمكنك تمرير أشجار عناصر كاملة عبر منافذ عرض مسماة (Named Slot Props) مثل header وfooter جنباً إلى جنب مع children للمحتوى الرئيسي.
function PanelLayout({ header, footer, children }) {
return (
<article className="rx-card">
<header>{header}</header>
<div>{children}</div>
<footer>{footer}</footer>
</article>
);
}يحل التركيب أيضاً مسألة تخصيص المكونات (Specialization) بأناقة بالغة؛ فعندما تمتلك مكوناً عاماً مثل <NoticeBanner> وتريد إنشاء نسخة متخصصة كتنبيه نجاح <SuccessBanner>، يقوم المكون المتخصص ببساطة بإرجاع المكون العام مع ضبط خصائصه اللونية والعنوانية مسبقاً وتمرير {children} بداخله.
function Notice({ badge, children }) {
return (
<aside className="rx-card">
<strong>{badge}</strong>
<div>{children}</div>
</aside>
);
}
function SuccessNotice({ children }) {
return <Notice badge="Success">{children}</Notice>;
}يتساءل بعض المبرمجين القادمين من خلفيات كائنية تقليدية عمّا إذا كان ينبغي إنشاء أصناف مكونات قاعدية والوراثة منها. تحسم مكتبة React هذا القرار بقاعدة قاطعة، وهي اعتماد التركيب بدلاً من الوراثة دائماً (Composition over Inheritance)؛ إذ توفر الخصائص وchildren والمنافذ المسماة مرونة كاملة دون تعقيد سلاسل الوراثة الهشة وتضارب الدوال.
لاختيار الأسلوب الأنسب عند تصميم واجهة المكون، اعتمد خاصية children عندما يمتلك الغلاف منطقة محتوى رئيسية واحدة بديهية، وأضف خصائص منافذ مسماة مثل header وactions عندما ينسق التخطيط منطقتين مستقلتين أو أكثر. يوضح الجدول التالي متى تختار كل نمط:
| نمط التركيب | توقيع الخصائص المعتاد | سيناريو التخطيط المثالي |
|---|---|---|
| منفذ تغليف مفرد | function Card({ children }) | البطاقات العامة وصناديق التنبيه وحاويات الأقسام |
| تخطيط متعدد المنافذ | function Shell({ header, sidebar, children }) | قوالب الصفحات والنوافذ المزودة بشريط أزرار مستقل |
| غلاف التخصيص المشتق | function ErrorAlert({ children }) | نسخ مهيأة مسبقاً تغلّف مكوناً أساسياً عاماً |
| وراثة الأصناف البرمجية | متروكة كلياً في React الحديثة | لا تُستخدم أبداً — استُبدلت بنسبة 100% بالتركيب والخصائص |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس مفهوم تركيب المكونات في React، وبنيت حاويات مرنة بخاصية children، ونظمت التخطيطات متعددة المناطق عبر منافذ JSX المسماة، وطبقت التخصيص بالتركيب دون أي وراثة أصناف. الخطوة التالية: انتقل الآن إلى الدرس رقم 12 «العرض الشرطي للعناصر في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Component Composition تركيب المكونات
- تجميع مكونات صغيرة محددة الوظيفة داخل مكونات حاوية أو تخطيطية لبناء واجهات غنية ومرنة.
- للمراجعة
- 02 children Prop خاصية children
- خاصية مدمجة في React تستقبل تلقائياً أي عناصر توضع بين وسم الفتح ووسم الإغلاق للمكون.
- للمراجعة
- 03 Named Slot Prop منفذ العرض المسمى
- خاصية مخصصة مثل header أو footer تستقبل عناصر JSX لملء منطقة محددة في تخطيط المكون.
- للمراجعة
- 04 Specialization تخصيص المكون العام
- إنشاء نسخة مخصصة من مكون عبر تغليف مكون عام وتمرير قيم محددة مسبقاً لخصائصه.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 JSX JSX
- JavaScript XML
- ينتج كائنات عناصر قياسية يمكن تمريرها بحرية تامة عبر خاصية children أو الخصائص المسماة.
- للمراجعة
- 02 API API
- Application Programming Interface
- في هندسة الواجهات، مجموعة الخصائص والمنافذ التي يوفرها المكون للمكونات الأب التي تستدعيه.
- للمراجعة
- 03 DRY DRY
- Don’t Repeat Yourself
- مبدأ عدم تكرار الكود، ويتحقق بتوحيد الإطارات والهوامش المشتركة داخل مكون حاوية واحد.
- للمراجعة
- 04 DOM DOM
- Document Object Model
- شجرة عناصر المتصفح النهائية الناتجة بعد ترجمة React لكافة المكونات المتداخلة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال SurfaceCard في محرر التجريب وأضف بطاقة ثالثة تغلّف عنواناً فرعياً وقائمة نقطية من عنصرين.
-
طوّر مكون PanelLayout في محرر التجريب ليستقبل خاصية إضافية ويعرض شارة حالة بجانب العنوان العلوي.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما اسم الخاصية التي تستقبل تلقائياً العناصر الموضوعة بين وسمي الفتح والإغلاق <Card>...</Card>؟
تضع React أي محتوى متداخل بين وسمي المكون داخل الخاصية القياسية children تلقائياً.
يجب أن يعرف مكون الغلاف المعتمد على {children} مسبقاً نوع الوسوم الدقيقة التي سيضعها الأب بداخله.
خطأ؛ فميزة مكونات الغلاف أنها تعمل بمرونة تامة دون معرفة مسبقة بنوع العناصر الممررة بداخلها.
كيف تصمم مكون تخطيط في React يحتاج إلى ثلاث مناطق محتوى مستقلة كالرأس والشريط الجانبي والمتن؟
نمرر عناصر JSX عبر خصائص مسماة مثل header وsidebar مع استخدام children للمحتوى الرئيسي.
في React، يمكنك تمرير عنصر JSX كامل مثل <Badge text="New" /> كقيمة داخل أي خاصية عادية.
صواب؛ لأن عناصر JSX تُترجم إلى كائنات JavaScript قياسية يمكن تمريرها عبر أي خاصية.
ما الطريقة القياسية في React لإنشاء مكون متخصص SuccessBanner اعتماداً على مكون عام NoticeBanner؟
يبني SuccessBanner واجهته بإرجاع المكون العام NoticeBanner مع تمرير الخصائص المخصصة و{children}.
ما المبدأ المعماري الذي تعتمده React بنسبة 100% بديلاً عن وراثة الأصناف؟
تعتمد مكتبة React مبدأ التركيب بدلاً من الوراثة في بناء وتخصيص كافة المكونات.
إذا استدعى الأب <SurfaceCard><h3>Title</h3></SurfaceCard> ونسي مكون SurfaceCard كتابة {children} في جملة الإرجاع، فماذا يحدث؟
لن يظهر العنوان المتداخل على الشاشة لأن المكون الحاضن لم يدرج {children} ضمن شجرة إرجاعه.
تتطلب مشاريع React الحديثة عادةً إنشاء أصناف مكونات أبوية وإعادة تعريف دالة الرسم عبر الوراثة.
خطأ؛ فالدوال والتركيب عبر الخصائص تغطي كافة احتياجات إعادة الاستخدام دون أي وراثة.
متى يُفضل استخدام خاصية children القياسية بدلاً من اختراع خاصية مخصصة مثل bodyContent؟
عندما يضم الغلاف منطقة محتوى رئيسية واحدة، فإن التداخل الطبيعي عبر children يحاكي سلاسة وسوم HTML.
يُعد الجمع بين المنافذ المسماة مثل header وfooter مع خاصية children في نفس مكون التخطيط نمطاً قياسياً نظيفاً في React.
صواب؛ فهذا الجمع يمنح المكون وضوحاً عالياً للمحتوى الرئيسي مع مرونة تامة للأشرطة الملحقة.