المكوّنات المركبة باستخدام Context
ابنِ مكوّنات متعددة الأجزاء تتشارك الحالة عبر Context.
المكوّنات المركبة باستخدام Context درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
المكوّنات المركبة
المكوّن المركب هو واجهة مستخدم منطقية واحدة مقسّمة إلى عدة مكوّنات فرعية تتعاون معًا، مثل Tabs وTab وTabPanel.
الحالة المشتركة عبر Context
يضع المكوّن الأب الحالة المشتركة في Context، ثم تقرؤها المكوّنات الفرعية باستخدام getContext.
<!-- Tabs.svelte -->
setContext("tabs", { active, setActive });قراءة المكوّن الفرعي لـ Context
يحصل كل من Tab وTabPanel على واجهة برمجة التطبيقات المشتركة.
<!-- Tab.svelte -->
const { active, setActive } = getContext("tabs");الاقتران المرن
لا تشير المكوّنات الفرعية مباشرةً إلى المكوّن الأب، بل تتواصل عبر Context.
واجهة برمجية قابلة للتركيب
يمكن للمستهلكين إعادة ترتيب المكوّنات الفرعية وتخصيصها بحرية.
<Tabs>
<TabList>
<Tab id="a">A</Tab>
<Tab id="b">B</Tab>
</TabList>
<TabPanel id="a">Content A</TabPanel>
<TabPanel id="b">Content B</TabPanel>
</Tabs>أمثلة
Tabs وAccordion وMenu وListbox وSteps.
اصطلاح التسمية
استخدموا بادئة مشتركة أو صادرات ضمن مساحة أسماء لتوضيح الواجهة.
import { Tabs, Tab, TabList, TabPanel } from "$lib/Tabs";Context آمن الأنواع
عرّفوا مفتاحًا من نوع symbol ونوعًا لواجهة برمجة التطبيقات المشتركة.
الأخطاء عند إساءة الاستخدام
إذا تعذر على مكوّن فرعي العثور على Context، فألقوا خطأً واضحًا ومفيدًا لإرشاد المستهلكين.
إمكانية إعادة الاستخدام
تتميز المكوّنات المركبة بإمكانية إعادة استخدام عالية، لأن المستهلكين يتحكمون في تركيبها.
الدمج مع Builders
غالبًا ما تستخدم المكوّنات المركبة نمط Builder داخليًا لتوفير إتاحة وصول بلا تصميم.
تحقق سريع
كيف تشارك المكوّنات المركبة الحالة؟
مراجعة
تقسّم المكوّنات المركبة واجهة المستخدم إلى مكوّنات فرعية قابلة للتركيب، وتتعاون عبر Context.
الأسئلة الشائعة
هل درس «المكوّنات المركبة باستخدام Context» مجاني؟
نعم — نص درس «المكوّنات المركبة باستخدام Context» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «المكوّنات المركبة باستخدام Context»؟
ابنِ مكوّنات متعددة الأجزاء تتشارك الحالة عبر Context. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «المكوّنات المركبة باستخدام Context»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Render Props باستخدام snippets
- المكوّنات عالية الرتبة
- نمط Builder لواجهة المستخدم عديمة الرأس
- المكوّنات المركبة باستخدام Context