Props: تمرير البيانات إلى مكوّن

تعلّم كيف تجعل مكوّناتك قابلة لإعادة الاستعمال بتمرير البيانات إليها عبر props.

7 دقيقة · 3 أسئلة

المكوّن الذي يعرض الشيء نفسه دائماً ليس مفيداً كثيراً. Props (اختصار لكلمة "properties" أي الخصائص) هي البيانات التي تمرّرها إلى مكوّن، تماماً مثل وسائط الدالة. تخيّل بطاقة دعوة: القالب واحد للجميع، ويتغيّر اسم المدعوّ فقط. المكوّن هو القالب، و الـ prop هو الاسم الأول.

function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Lea" />
      <Greeting name="Karim" />
    </div>
  );
}

في App، تكتب name="Lea" مثل خاصية HTML: يجمع React كل هذه القيم في كائن، يستقبله المكوّن تحت اسم props. ثم تقرأ props.name داخل الأقواس المعقوفة. عملياً، غالباً ما تقوم بـ تفكيك الـ props مباشرة بين قوسي الدالة: function Greeting({ name }). نقطة مهمّة أخرى: النص يوضع بين علامات اقتباس، أما كل شيء آخر (الأرقام، القيم المنطقية، المصفوفات) فيوضع بين أقواس معقوفة.

function ProfileCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age} years old</p>
    </div>
  );
}

function App() {
  return <ProfileCard name="Nadia" age={31} />;
}

هذه هي قوّة props كاملةً: شبكة اجتماعية لا تكتب مكوّناً لكل منشور، بل تكتب مكوّن Post واحداً، وتمرّر إليه props مختلفة ملايين المرّات. تكتب القالب مرّة واحدة، وتستعمله في كل مكان.

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ما فائدة props؟
   • تمرير البيانات من مكوّن أب إلى ابن
   • تخزين بيانات تتغيّر مع مرور الوقت
   • تطبيق أنماط CSS على مكوّن
2. كيف تمرّر الرقم 25 إلى مكوّن Profile؟
   • <Profile age="25" />
   • <Profile age={25} />
   • <Profile age=25 />
3. هل يمكن لمكوّن أن يعدّل الـ props التي يستقبلها؟
   • نعم، ما دام يفعل ذلك داخل الـ return
   • نعم، لكن السلاسل النصية فقط
   • لا، الـ props للقراءة فقط