المكونات المركبة: أنماط الطفل التعاونية

في تدفق البيانات الافتراضي لـ React، تُمرر المكونات الأبوية الخصائص مباشرةً إلى مكوناتها الأبناء. ورغم أن هذا الأسلوب يُناسب واجهات المستخدم البسيطة، إلا أن الأدوات الأكثر تعقيدًا، مثل علامات التبويب والقوائم والشرائح الدوارة وعناصر التنقل والقوائم المنسدلة، تتطلب تنسيقًا بين المكونات المتجاورة. فالنقر على علامة تبويب يُفترض أن يُظهر لوحتها المقابلة، واختيار عنصر من القائمة يُفترض أن يُغلقها، والتقدم في عنصر التنقل يُفترض أن يُحدّث الخطوة النشطة في جميع عناصر واجهة المستخدم ذات الصلة. غالبًا ما يؤدي تنسيق هذه التفاعلات من خلال تمرير الخصائص أو كائنات التكوين الكبيرة إلى تصميمات جامدة، وهندسة زائدة، وواجهات برمجة تطبيقات هشة يصعب صيانتها مع تطور الميزات.

بناء واجهات مستخدم مرنة باستخدام مكونات مركبة

يعالج نمط المكونات المركبة هذه التحديات من خلال إنشاء قناة اتصال مشتركة، تُنفذ عادةً باستخدام سياق React ، بين حاوية رئيسية ومكوناتها الفرعية المتخصصة. يمتلك المكون الرئيسي الحالة الأساسية ويُتيح الوصول إلى الدوال المستخدمة لتحديثها. تستهلك المكونات الفرعية الحالة المشتركة وتُجري التحديثات استجابة لتفاعلات المستخدم.

يكمن مفتاح الفكرة في أن العناصر الفرعية لا تتواصل فيما بينها مباشرةً ، بل تتبع سياق العنصر الأصل الذي يبث الحالة الراهنة. يمنح هذا الفصل المستخدمين حريةً كاملةً في إعادة ترتيب التصميم المرئي، ووضع عناصر التحكم أسفل المحتوى، وتجميع اللوحات في أقسام مخصصة، أو إعادة تصميم واجهة المستخدم، دون الإخلال بنموذج التفاعل. تصبح العلاقة الهيكلية في JSX آلية التكوين: يعرف العنصر الأصل العناصر الفرعية التي تنتمي إلى المجموعة التفاعلية بناءً على مكان عرضها فقط.

إدارة الدولة المنفصلة مع<Tabs>

يوضح الرسم البياني أعلاه كيف<Tabs> يدير الحالة ويبثها عبر السياق. كلاهما<Tab.Trigger> و<Tab.Content> الاشتراك في هذه الحالة المشتركة بدلاً من التواصل المباشر مع بعضها البعض. يسمح هذا الفصل للمستخدمين بوضع المكونات الفرعية في أي مكان داخل<Tabs> شجرة مع الحفاظ على تزامن سلوكي مثالي.

مثال: مركب<Tabs> عنصر

بناء صغيرًا ...