شرح صفوف ومحتوى الفقرة
عند بناء مكونات واجهة تأسيسية كالأزرار والشارات القابلة للتخصيص، يمكنك فصل الخصائص الخاصة بالمكون وتمرير بقية سمات HTML القياسية دفعة واحدة عبر معامل البقية والانتشار مثل function Badge({ tone = 'info', ...rest }) ثم تطبيقها بـ <span {...rest} />.
استخدم تمرير الانتشار بحكمة في المكونات القاعدية المغلفة لعناصر المتصفح، وتجنب الإفراط فيه بين شاشات التطبيق الكبرى ليبقى تدفق البيانات صريحاً وواضحاً. يلخص الجدول التالي أنماط التعامل مع الخصائص:
| نمط الخصائص | مثال الصياغة البرمجية | الاستخدام الهندسي الأنسب |
|---|---|---|
| التمرير الصريح للخصائص | <Card title="React" price={29} /> | مكونات الأعمال الواضحة ذات المدخلات المحددة والمقروءة |
| التفكيك مع قيم افتراضية | function Card({ price = 0 }) | تأمين قيم بديلة تلقائية عند غياب الخصائص الاختيارية |
| حساب قيم محلية مشتقة | const total = price + tax; | تنسيق أو حساب المخرجات بنقاء تام دون تعديل المدخلات |
| التمرير بمعامل الانتشار | function Btn({ kind, ...rest }) | تمرير سمات الوصول وHTML القياسية للمكونات التأسيسية |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس كيف تنتقل البيانات المتنوعة من الأب إلى الابن عبر Props، وكيفية تفكيكها مع القيم الافتراضية، وسبب حظر تعديلها مطلقاً، ومتى نستخدم معامل الانتشار لتمرير السمات بأمان. الخطوة التالية: انتقل الآن إلى الدرس رقم 11 «تركيب المكونات وخاصية المحتوى المتداخل children» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.