Sveltejs Academy · درس

Render Props باستخدام snippets

مرّر منطق العرض كخصائص snippets لعكس اتجاه التحكم وزيادة المرونة.

الدرس 1 من 413 خطوة

Render Props باستخدام snippets درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.

نمط Render Props

تتيح Render Props للمكوّن الأب توفير منطق التصيير للمكوّن الفرعي. وفي Svelte 5، تُعدّ المقاطع الخيار الطبيعي لذلك.

تمرير مقطع

يعرّف المكوّن الأب مقطعًا ويمرّره باعتباره خاصية.

<!-- Parent -->
{#snippet item(thing)}
  <li>{thing.name}</li>
{/snippet}
<List items={data} {item} />

التصيير في المكوّن الفرعي

يستدعي المكوّن الفرعي المقطع باستخدام معاملات لكل عنصر.

<!-- List.svelte -->
let { items, item } = $props();
{#each items as thing}
  {@render item(thing)}
{/each}

قلب اتجاه التحكم

يقلب هذا النمط اتجاه التحكم: يقرر المكوّن الفرعي متى يصيّر، ويقرر المكوّن الأب ماذا يصيّر.

إمكانية إعادة الاستخدام

يمكن لمكوّن List واحد تصيير أي شيء: المنتجات والمستخدمين والمنشورات.

TypeScript

حدّد نوع معامل المقطع للحصول على أمان وقت الترجمة والإكمال التلقائي في بيئة التطوير.

مقارنة بالفتحات

المقاطع أقوى: فهي تقبل معاملات، ويمكن استخدامها بشكل مشروط، كما أنها مَعلَمية.

النمط القديم: خصائص الفتحات

كان Svelte 4 يوفّر خصائص الفتحات (let:thing). وتعمّم المقاطع هذا النمط وتستبدله.

مقاطع متعددة

مرّر مقاطع متعددة لتركيب واجهات مستخدم أغنى (رأس، وعنصر، وتذييل).

المكوّنات عديمة الواجهة

تدعم Render Props مكتبات المكوّنات عديمة الواجهة التي توفّر المنطق لا التنسيق.

حالات الاستخدام

الجداول، والقوائم، وأدوات التمرير الافتراضية، والإكمال التلقائي، والتقويمات.

اختبار سريع

ما المشكلة التي تحلّها Render Props؟

أجب عليها في الدرس التفاعلي

مراجعة

تقلب Render Props، عبر المقاطع، اتجاه التحكم. يوفّر المكوّن الأب التصيير، بينما يوفّر المكوّن الفرعي البنية والتوقيت.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «Render Props باستخدام snippets» مجاني؟

نعم — نص درس «Render Props باستخدام snippets» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.

ماذا ستتعلم في «Render Props باستخدام snippets»؟

مرّر منطق العرض كخصائص snippets لعكس اتجاه التحكم وزيادة المرونة. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟

لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «Render Props باستخدام snippets»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟

نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Sveltejs Academy