Props تمرير Props
آخر تحديث: 2026-11-03
Props تمرير Props
الـ props هي البيانات التي يسلّمها المكوّن الأب إلى ابنه، وتتصرّف كوسائط دالة: للقراءة فقط. يستقبل الابن عبر props نصوصاً وأرقاماً وكائنات وحتى مكوّنات، فيعرض محتوى مختلفاً بحسبها، وهو ما يجعل props أساس تدفّق البيانات في React. ولأن البيانات تتحرك نزولاً فقط، تبقى الشجرة قابلة للتنبؤ ويكون لكل تحديث مصدر يمكن تتبعه.
| المجموعة | العرض والحالة |
|---|---|
| النوع | نمط |
| منذ الإصدار | أقدم إصدارات React |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
function Badge({ text, color }) { // فكّك الـ props
return <span style={{ color }}>{text}</span>
}
<Badge text="New" color="red" /> // المكوّن الأب يمرّر البيانات⚙️ المعاملات
| props | الكائن الذي يضمّ كل سمة يمرّرها المكوّن الأب؛ تميل إلى تفكيك الحقول التي تحتاجها فقط داخل معاملات الدالة. |
|---|
القيمة المرجعة：لا قيمة معادة — مجرد اصطلاح برمجي ونموذج ذهني.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
شارة ملوّنة تقرأ «Current level: Beginner» مع ثلاثة أزرار تبديل أسفلها؛ الضغط على «Advanced» أو «Master» يغيّر نص الشارة ولونها معاً — أي أن الأب مرّر بيانات جديدة عبر props.💡 النقاط الأساسية
⚠️ تحذير الـ props للقراءة فقط: تعديلها داخل الابن يكسر تدفّق البيانات أحادي الاتجاه، فاطلب دالة استجابة ودع الأب يحدّث حالته.
💡 نصيحة فضّل التفكيك في التوقيع ({ name, size })؛ فهو أوضح من props.name في كل موضع ويُظهر اعتماديات المكوّن بالعين.
ℹ️ ملاحظة يمكن أن تحمل props أي قيمة: نصوص وأرقام ومصفوفات ودوال وJSX وحتى مكوّن آخر.
🏷️ المزيد من العرض والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س هل يمكن تعديل props؟
ج لا. الـ props ملك للمكوّن الأب، ولا يقرأها الابن إلا قراءةً؛ ولتغيير ما يُعرض، مرّر prop على شكل دالة استجابة يتيح للأب تحديث حالته.
س ما الفرق بين props و state؟
ج الـ props تُمرَّر من الخارج وهي للقراءة فقط، بينما الحالة يحتفظ بها المكوّن نفسه ويمكنه تحديثها؛ وتغيّر أيّهما يُطلق إعادة عرض.
س كيف يعيد الابن البيانات إلى أبيه؟
ج يمرّر الأب دالة كـ prop (مثل onChange)؛ ويستدعيها الابن في اللحظة المناسبة مع البيانات، ثم يقرّر الأب كيف يحدّث.
