تمرير Props وأنماط التركيب
مرّر props وحدد القيم الافتراضية عبر التفكيك؛ وقارن التركيب بالوراثة؛ واستخدم أنماط children وما يشبه slots لإنشاء واجهات مرنة.
تمرير Props وأنماط التركيب درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
نظرة عامة
الهدف: مرّر البيانات باستخدام props، وعيّن القيم الافتراضية، وابنِ واجهات المستخدم عبر التركيب باستخدام children/slots.
أساسيات تمرير props
Props هي مدخلات للقراءة فقط من المكوّن الأب إلى المكوّن الابن. يعرض الأبناء باستخدام السمات؛ ويقرأها الأبناء عبر المعاملات.
- لا تعدّل props.
- تحدث إعادة التصيير عند تغيّر props أو حالة المكوّن الأب.
عرض توضيحي: القيم الافتراضية لـ props
وفّر قيمًا افتراضية لـ props باستخدام تفكيك المعاملات للحفاظ على متانة المكوّنات.
<div id="root"></div>
التركيب، لا الوراثة
يجمع التركيب واجهات المستخدم من أجزاء أصغر (children/slots)، ويُفضَّل على الوراثة لتحقيق المرونة ووضوح تدفق البيانات.
عرض توضيحي: children وslots
استخدم children وخصائص شبيهة بـ slots-like ومسمّاة لتخصيص التخطيط دون استخدام الوراثة.
<div id="root"></div>
نصائح ومزالق
نصائح:
- وثّق أسماء props وقيمها الافتراضية.
- فضّل children/slots صغيرة ومركّزة.
- تجنب سلاسل الوراثة العميقة.
اختبار القيم الافتراضية لـ props
مراجعة
مراجعة: مرّر البيانات عبر props، وأضف قيمًا افتراضية باستخدام التفكيك، وفضّل التركيب (children/slots) على الوراثة لبناء واجهات قابلة لإعادة الاستخدام.
الأسئلة الشائعة
هل درس «تمرير Props وأنماط التركيب» مجاني؟
نعم — نص درس «تمرير Props وأنماط التركيب» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «تمرير Props وأنماط التركيب»؟
مرّر props وحدد القيم الافتراضية عبر التفكيك؛ وقارن التركيب بالوراثة؛ واستخدم أنماط children وما يشبه slots لإنشاء واجهات مرنة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «تمرير Props وأنماط التركيب»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- تمرير Props وأنماط التركيب
- Props والتركيب
- مكوّنات العرض القابلة لإعادة الاستخدام