Composition تركيب المكوّنات
آخر تحديث: 2026-11-03
Composition تركيب المكوّنات
يوصي React بالتراكب بدل الوراثة لإعادة استخدام المكوّنات: يمرّر الأب JSX داخل children أو كـ prop مخصّص، فتقرّر حاوية عامة مثل Card أو Layout أو Modal أين يوضع ذلك JSX، ويقرّر المستدعي ما يحتويه. وبذلك يكون children آليات الخانة الأكثر طبيعية على الإطلاق. وتبقى الحاوية لا تدري بالمحتوى الذي تعرضه، فيستطيع الإطار نفسه أن يستضيف نموذجاً أو رسماً بيانياً أو فقرة دون أن يعرف أيّها يعرض.
| المجموعة | أنماط المكونات |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
function Card({ children, footer }) {
return (
<div className="card">
<div>{children}</div> {/* خانة المحتوى الرئيسية */}
<div>{footer}</div> {/* خاصية خانة مخصّصة */}
</div>
)
}
// الاستخدام: <Card footer={<small>2026</small>}><p>Body text</p></Card>القيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
لوحتا بطاقتين بعنوان، يُرفق محتواهما من المستدعي عبر children — فـ Panel يملك الإطار فقط ولا يهمّه البنية في داخله.💡 النقاط الأساسية
💡 نصيحة props.children هي الخانة الضمنية؛ وحين تحتاج عدة خانات، مرّر JSX عبر خصائص مسمّاة مثل header و footer.
ℹ️ ملاحظة يبقي التركيب الحاوية مستقلة عن محتواها: لا تعرف Panel ما بداخلها ولا يهمّها، فالاثنان منفصلان بطبيعتهما.
⚠️ تحذير لا تستعمل cloneElement ولا وراثة الأصناف لحقن البنية — في الغالبية العظمى من الحالات يكون children مع props أوضح وأسهل ضبطاً.
🏷️ المزيد من أنماط المكونات
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين children و prop عادية؟
ج children هو المحتوى بين وسم الفتح ووسم الإغلاق، وهو أكثر طبيعية في صياغة JSX؛ وتحت الغطاء يظل prop كغيرها ويمكن مزجه بحرية مع الخصائص المسمّاة.
س كيف أنفّذ عدة خانات؟
ج عرّف عدة خصائص من نوع JSX — <Modal header={…} footer={…}>{body}</Modal> — واعرض كلاً منها داخل المكوّن.
س لماذا نختار التركيب بدل الوراثة؟
ج موقف React الرسمي: الوراثة تربط المكوّن بتنفيذ صنف أبيه، بينما يمرّر التركيب JSX عبر props، وهو مرن وقابل للتنبؤ ولا يحتاج صيغة أصناف.
