Default Props القيم الافتراضية للخصائص
آخر تحديث: 2026-11-03
Default Props القيم الافتراضية للخصائص
حين لا يمرّر المكوّن الأب خاصية ما تكون قيمتها undefined، وقد تظهر الواجهة فارغة أو يُلقى خطأ. وتمنح القيم الافتراضية عند التفكيك (أو عامل ??) للخصائص الاختيارية قيمة بديلة، فيظل المكوّن سلوكه معقولاً عند نقص خاصية وتبقى واجهته ودودة. ولا تدخل القيم الافتراضية حيز التنفيذ إلا حين تكون القيمة undefined، لذا تبقى القيم الزائفة مثل 0 أو النص الفارغ محترمة كما هي.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
function Avatar({ name = 'Anonymous', size = 40 }) {
// ↑ القيمة الافتراضية عند التفكيك: تُطبَّق عندما لا تُمرَّر الخاصية
...
}⚙️ المعاملات
| destructuring default | امنح الخاصية قيمة بديلة بـ = داخل تفكيك المعاملات؛ ولا تعمل إلا حين تكون القيمة undefined، لذا تُستخدم 0 و'' كما هما. |
|---|
القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
ثلاثة صفوف من الصور الرمزية: الأول يظهر «Alice» بحجم كبير؛ والثاني يظهر «Bob» بلا خاصية size فيسقط على الحجم المتوسط الافتراضي؛ والثالث لا يمرّر شيئاً فيظهر الاسم الافتراضي «Anonymous user» مع صورة متوسطة.💡 النقاط الأساسية
💡 نصيحة فضّل القيم الافتراضية عند التفكيك على defaultProps الساكنة المهجورة: الصيغة أكثر اختصاراً وألطف مع استنتاج الأنواع.
ℹ️ ملاحظة انتبه إلى ||، فهو يعتبر 0 و'' أيضاً «غير مُمرَّرة»؛ استخدم ?? حين تكون القيمة الاختيارية قد تكون زائفة عن قصد.
⚠️ تحذير لا تضع قيمة افتراضية لخاصية إلزامية: من الأفضل وسمها required في TypeScript أو إطلاق تحذير واضح أثناء التطوير.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل ما زال بإمكاني استخدام defaultProps؟
ج إنها مهجورة على المكوّنات الدالية ولم تعد مدعومة منذ React 19؛ انتقل إلى قيمة افتراضية عند التفكيك في قائمة المعاملات، فالمعنى نفسه وأوضح في القراءة.
س كيف أضع قيمة افتراضية لخاصية؟
ج الشكل الأكثر شيوعاً هو القيمة الافتراضية عند التفكيك: function C({ size = 40 }); ويمكنك أيضاً كتابة const size = props.size ?? 40 داخل جسم الدالة.
س ما الفرق بين || و ?? في القيم الافتراضية؟
ج يعود || إلى القيمة الافتراضية عند 0 و'' وfalse أيضاً، بينما لا يعود ?? إلا عند null أو undefined. فضّل ?? للأرقام والنصوص الاختيارية.
