تكرار السؤال: …
الإجابة المختصرة
هو نمط تصميمي يسمح لمجموعة من المكونات بالتعاون ومشاركة الحالة ضمنياً عبر Context داخلي، مما يمنح المستخدم حرية كاملة في ترتيب وتخصيص هيكل الواجهة (مثل Tabs أو Select).
الشرح
بدلاً من إنشاء مكون واحد ضخم يستقبل عشرات الـ Props لتخصيص كل زر ورمز، يقسم نمط المكونات المركبة الواجهة إلى أجزاء صغيرة (Tabs.List, Tabs.Tab, Tabs.Panel). تشترك هذه الأجزاء في الحالة عبر React Context مخفي، مما يوفر واجهة برمجية نظيفة ومرنة تشبه وسوم HTML الطبيعية مثل <select> و <option>.
مثال بالكود
// استخدام المكون المركب بنظافة فائقة
function App() {
return (
<Tabs defaultValue="tab1">
<Tabs.List>
<Tabs.Tab value="tab1">الملف الشخصي</Tabs.Tab>
<Tabs.Tab value="tab2">الأمان</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="tab1">بيانات المستخدم...</Tabs.Panel>
<Tabs.Panel value="tab2">إعدادات كلمة المرور...</Tabs.Panel>
</Tabs>
);
}أخطاء شائعة
- محاولة استخراج الأبناء بواسطة React.Children.map مما يكسر التضمين في حال تغليف المكون الفرعي بـ div وسيط، بدلاً من الاعتماد على Context.