تلات طرق للتركيب في React

في React فيه أكتر من طريقة لتحقيق الـ Composition. أشهرها تلاتة.

Children

بتبعت مكونات جوه مكون باستخدام children.

Card.tsx

<Card>  <h2>Product</h2>  <button>Buy</button></Card>

Compound Components

مجموعة مكونات بتشتغل مع بعض كأنها واجهة واحدة.

Tabs.tsx

<Tabs>  <Tabs.List>    <Tabs.Trigger value="profile">      Profile    </Tabs.Trigger>  </Tabs.List>  <Tabs.Content value="profile">    Profile Content  </Tabs.Content></Tabs>

كل جزء له مسؤولية، وممكن يشتركوا في state واحدة عن طريق Context.

فتحات بأسماء

بتحدد أماكن للمكونات اللي هتدخلها.

PageLayout.tsx

<PageLayout  header={<Header />}  sidebar={<Sidebar />}  content={<Dashboard />}/>

هنا الـ Layout بيتحكم في أماكن الأجزاء، لكن مش لازم يعرف تفاصيل تنفيذها.

خلّصت الفصل لما

children لمحتوى جوّه الحاوية
المكونات المركبة زي Tabs كواجهة واحدة
الفتحات المسماة لأماكن الهيدر والسايدبار والمحتوى

🧠 اختبر نفسك

١) Tabs.List و Tabs.Content إيه طريقتهم؟

Compound Components. مجموعة بتشتغل كواجهة واحدة، وممكن تشترك في state عن طريق Context.

٢) الـ Layout عارف تفاصيل الـ Sidebar؟

لأ. بياخد المكان. التنفيذ جوه المكون اللي اتبعت له.