props هي مدخلات مكوّن React. يمررها الأب كسمات في JSX، <UserCard name="Ada" online={true} />، ويستقبلها الابن ككائن واحد، تفككه عادة في معاملات الدالة. تتيح props لمكوّن واحد أن يعرض بيانات مختلفة في كل مرة تستخدمه فيها.
يعرض UserCard نفسه ثلاثة أشخاص مختلفين. لاحظ الأخير: السمة التي بلا قيمة، online، تعني online={true}. أضف بطاقة رابعة باسمك ودورك.
تمرير props وقراءتها
مرّر النص بين علامتي تنصيص وأي قيمة أخرى بين أقواس معقوصة: الأرقام والقيم المنطقية والمصفوفات والكائنات والدوال، بل حتى JSX.
<Product
title="Desk lamp"
price={39.5}
inStock={false}
tags={['light', 'office']}
seller={{ name: 'Lumen', rating: 4.8 }}
/>
تجمع React كل السمات في كائن واحد وتمرره كالوسيط الأول للمكوّن. يمكنك قراءته على أنه props، أو استخراج الحقول التي تحتاجها مباشرة في قائمة المعاملات:
function Product(props) {
return <h3>{props.title}</h3>;
}
function Product({ title, price, seller }) {
return <h3>{title}, ${price} from {seller.name}</h3>;
}
تستقبل النسختان الكائن نفسه. التفكيك هو الأسلوب الشائع لأن توقيع الدالة يسرد حينها بالضبط الـ props التي يستخدمها المكوّن.
القيم الافتراضية
أعطِ الـ prop قيمة افتراضية بالقيمة الافتراضية للتفكيك في JavaScript، = value. تُطبَّق عندما يغفل الأب الـ prop، أو يمرر undefined. ولا تُطبَّق على null أو 0 أو false أو ''، فهذه قيم حقيقية.
تعود الأزرار الثلاثة الأولى إلى قيمها الافتراضية حيث تكون الـ prop غائبة أو undefined. أما الأخير فيمرر null، فتكون size فعلًا null، ولا يجد البحث أي حشوة. غيّر size={null} إلى size="small" لإصلاحه.
يضبط الكود الأقدم القيم الافتراضية بخاصية ثابتة، Button.defaultProps = { size: 'medium' }. أزالت React 19 الخاصية defaultProps من مكوّنات الدوال: تتجاهلها JSX على الدالة دون أي تحذير. وما زالت تعمل على مكوّنات الأصناف. استخدم القيم الافتراضية للتفكيك.
تمرير الدوال كـ props
تتدفق البيانات إلى الأسفل: يمرر الأب props إلى أبنائه، ولا يحدث العكس أبدًا. عندما يحتاج الابن إلى إخبار الأب بأن شيئًا حدث، يمرر الأب دالة، ويستدعيها الابن. وتُسمى هذه الـ props اصطلاحًا onSomething.
لا يخزن Rating أي شيء. يعرض value التي يستقبلها ويبلّغ عن النقرات عبر onRate. الحالة موجودة في App، الذي يمررها إلى الأسفل من جديد. مرّر onRate={setRating} مباشرة بدلًا من handleRate وسيظل يعمل: دالة الضبط دالة أيضًا. نقل الحالة إلى أب مشترك بهذه الطريقة يُسمى رفع الحالة.
نشر props
عندما يكون لديك كائن مفاتيحه تطابق props مكوّن ما، انشره بـ {...object} بدلًا من كتابة كل سمة. وتؤدي صيغة البقية العكس في قائمة المعاملات: تأخذ بضع props بالاسم، وتجمع كل ما تبقى، وتمرره.
تنشر الصورة الرمزية الثانية person ثم تضبط color: عندما تظهر الـ prop نفسها مرتين يفوز الأخير، لذا ضع ما تريد تجاوزه بعد النشر. يحتفظ TextField بـ label لنفسه ويمرر type وplaceholder وmaxLength مباشرة إلى <input>. استخدم النشر في المغلّفات مثل هذا؛ أما في غيرها فسرد props صراحة يسهّل رؤية ما يحصل عليه المكوّن.
props للقراءة فقط
يجب ألا يغيّر المكوّن props الخاصة به أبدًا. فهي تخص الأب، وقد يكون الكائن نفسه مشتركًا. عاملها كوسائط دالة لا يُسمح لك بإعادة إسنادها:
function Counter({ count }) {
count = count + 1; // wrong: changes a local copy, the parent never sees it
return <p>{count}</p>;
}
function Profile(props) {
props.name = 'Someone else'; // wrong: in development React freezes props, so this throws a TypeError
return <p>{props.name}</p>;
}
ومع ذلك تتغير props بمرور الوقت. عندما يُعرض الأب من جديد بقيم جديدة، يستقبل الابن كائن props جديدًا ويُعرض به:
لا يغيّر Temperature قيمة celsius أبدًا. بل يحسب fahrenheit منها في كل عرض. اسحب المنزلق فتتغير حالة الأب، فيحصل الابن على prop جديدة. إذا احتاج الابن إلى قيمة يمكنه تغييرها بنفسه، فتلك القيمة حالة وليست prop.
props مقابل الحالة
كل من props والحالة قيم JavaScript عادية تؤثر في ما يعرضه المكوّن، وتغيّر أي منهما يعيد عرض المكوّن. الفرق هو من يملك القيمة.
| Props | الحالة | |
|---|---|---|
| مصدرها | الأب، كسمات في JSX | المكوّن نفسه، من useState أو useReducer |
| هل يستطيع المكوّن تغييرها | لا، فهي للقراءة فقط | نعم، عبر دالة الضبط الخاصة بها |
| الاستخدام المعتاد | إعداد المكوّن: تسمية، أو حجم، أو البيانات المعروضة | تذكّر شيء يتغير: نص الإدخال، أو قائمة مفتوحة |
كثيرًا ما تكون القيمة نفسها الاثنين معًا. في مثال درجة الحرارة أعلاه، celsius حالة في App وprop في Temperature. يحتفظ المالك بها كحالة ويمررها إلى الأسفل كـ prop، مع دالة لتغييرها عندما يحتاج الابن إلى ذلك.
يمكن للـ prop أن تحمل أي قيمة، بما في ذلك JSX والمكوّنات. تمرير عنصر مثل icon={<StarIcon />} يتيح للأب ملء خانة في الابن، وهي الفكرة نفسها التي في children لكن باسم من اختيارك.
الـ prop المسماة children
كل ما تضعه بين وسمي فتح المكوّن وإغلاقه يصل كـ prop اسمها children. بهذه الطريقة تبني المغلّفات مثل البطاقات واللوحات والتخطيطات التي لا تعرف محتواها مسبقًا:
تتناول صفحة children تمرير عدة خانات والتعامل مع children بأمان.
المفاتيح ليست props
يبدو key كسمة، لكن React تحتفظ به لنفسها لتطابق عناصر القائمة بين مرات العرض. لا يستقبله المكوّن أبدًا:
تُظهر وحدة التحكم props.key على أنها undefined وprops.id بالقيمة الحقيقية. عندما يحتاج الابن إلى المعرّف، مرّره مرة ثانية باسم آخر، كما يفعل id هنا. ويحذّر بناء التطوير أيضًا عندما تقرأ props.key؛ أما المعاينة فتعمل مثل بناء الإنتاج، فلا ترى إلا undefined.
الأسئلة الشائعة
ما هي props في React؟
props (اختصار properties، أي الخصائص) هي وسائط المكوّن. يمررها الأب كسمات في JSX، <Avatar size={48} />، ويستقبلها الابن ككائن واحد، يُفكَّك عادة: function Avatar({ size }).
كيف أضبط قيمة افتراضية لـ prop؟
استخدم القيمة الافتراضية في التفكيك: function Button({ size = 'medium' }). تُطبَّق القيمة الافتراضية عندما تكون الـ prop غائبة أو undefined. أزالت React 19 الخاصية defaultProps من مكوّنات الدوال؛ وما زالت مكوّنات الأصناف تدعمها.
هل يمكن لمكوّن ابن أن يغيّر props الخاصة به؟
لا. props للقراءة فقط. لتغيير ما يعرضه الابن، يمرر الأب props جديدة؛ ولكي يتمكن الابن من طلب تغيير، يمرر الأب دالة مثل onChange ويستدعيها الابن.
ما الفرق بين props والحالة؟
تأتي props من الأب ولا يستطيع الابن تغييرها. أما الحالة فتخص المكوّن نفسه وتتغير عبر دالة الضبط الخاصة بها. كثيرًا ما تكون القيمة حالة في الأب وprop في أبنائه.
لماذا تكون props.key قيمتها undefined؟
تستخدم React نفسها key (مثل ref في إصدارات React الأقدم) لتتبع عناصر القائمة، ولا تُمرَّر إلى المكوّن. إذا احتاج الابن إلى القيمة فمررها مرة أخرى باسم آخر، مثل <Row key={id} id={id} />.
