نمط Slots مع أبناء ذوي أسماء واضحة
نفّذ واجهات شبيهة بـ Slots باستخدام خصائص مسمّاة أو أجزاء ابنة (Header، Actions، Footer). قدّم قيمًا افتراضية وحافظ على قابلية التنبؤ بمواضعها.
نمط Slots مع أبناء ذوي أسماء واضحة درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
نظرة عامة على Slots
الهدف: توفير مواضع يدرج المستخدمون فيها عناصر الواجهة.
- خصائص مسماة: header وactions وfooter
- أجزاء الأبناء: Card.Header وCard.Body وCard.Footer
- قيم افتراضية للمناطق غير الموفّرة
قواعد تصميم Slots
- الأسماء الواضحة تعبّر عن مناطق التخطيط
- الموضع المتوقع داخل العنصر الأب
- البدائل عند عدم توفير Slot
الخصائص المسماة بوصفها Slots
ابدأ ببساطة: مرّر JSX عبر خصائص مسماة. يعرض العنصر الأب كل منطقة.
<div id="root"></div>أجزاء الأبناء بوصفها Slots
وفّر أبناءً مسمّين على هيئة أجزاء ثابتة؛ ويرتّبها العنصر الأب.
<div id="root"></div>Slots اختيارية وقيمها الافتراضية
اجعل Slots الاختيارية اختيارية فعلًا: اعرضها فقط إذا تم توفيرها، وحافظ على قيم افتراضية منطقية في المواضع الأخرى.
<div id="root"></div>نصائح ومطبات شائعة
- سمِّ Slots بوضوح (Header وActions وFooter)
- وفّر قيمًا افتراضية آمنة للمناطق غير المتاحة
- تجنّب الاعتماد على فهرس العنصر الابن؛ وفضّل الأجزاء الصريحة
أفضل ممارسة لنمط Slots
مراجعة سريعة
مراجعة سريعة: نفّذ Slots باستخدام خصائص مسماة أو أجزاء الأبناء. اجعل المواضع متوقعة، وقدّم قيمًا افتراضية للحفاظ على بساطة API.
الأسئلة الشائعة
هل درس «نمط Slots مع أبناء ذوي أسماء واضحة» مجاني؟
نعم — نص درس «نمط Slots مع أبناء ذوي أسماء واضحة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «نمط Slots مع أبناء ذوي أسماء واضحة»؟
نفّذ واجهات شبيهة بـ Slots باستخدام خصائص مسمّاة أو أجزاء ابنة (Header، Actions، Footer). قدّم قيمًا افتراضية وحافظ على قابلية التنبؤ بمواضعها. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «نمط Slots مع أبناء ذوي أسماء واضحة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تنسيق العمل بين المكوّن الأب والابن عبر Context
- سهولة استخدام API عبر التركيب
- نمط Slots مع أبناء ذوي أسماء واضحة