الـ props بالتفصيل

الـ component المسمّى MovieCard من القسم 1 يقول «Arrival» دائمًا. والـ component الذي لا يعرض إلا فيلمًا واحدًا ليس قابلًا لإعادة الاستخدام؛ إنه قالب له استخدام واحد. الـ props تحلّ هذا: إنها الطريقة التي يسلّم بها الأب البيانات إلى الابن، تمامًا كما تسلّم البيانات إلى دالة عبر وسائطها.

تمرير الـ props وقراءتها

مرّر الـ props كخصائص على وسم الـ component:

export default function App() {
  return (
    <main>
      <MovieCard title="Arrival" year={2016} watched />
      <MovieCard title="Past Lives" year={2023} watched={false} />
    </main>
  );
}

تجمعها React في كائن واحد، { title: 'Arrival', year: 2016, watched: true }، وتمرّره كأول وسيط للـ component. وفي الغالب تفكّكه (destructuring) مباشرة في قائمة المعاملات:

export default function MovieCard({ title, year, watched }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{year}</p>
      <p>{watched ? 'Watched' : 'To watch'}</p>
    </article>
  );
}

ثلاث تفاصيل في الصياغة توقع الناس في الخطأ:

• علامات الاقتباس تعني نصًا. year="2016" يمرّر النص “2016”. استخدم الأقواس المعقوصة لأي شيء آخر: year={2016} وwatched={false} وgenres={['drama', 'sci-fi']}.
• الخاصية المجرّدة تعني true. <MovieCard watched /> مطابق لـ watched={true}، مثل disabled في HTML.
• التفكيك اختياري. function MovieCard(props) مع props.title يعمل أيضًا. لكن التفكيك يوثّق بنظرة واحدة الـ props التي يتوقّعها الـ component، ولهذا يستخدمه معظم الكود.

القيم الافتراضية

امنح الـ prop قيمة افتراضية داخل نمط التفكيك:

export default function MovieCard({ title, year, watched = false, genres = [] }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{year} · {genres.join(', ') || 'No genres yet'}</p>
      <p>{watched ? 'Watched' : 'To watch'}</p>
    </article>
  );
}

الآن يعمل <MovieCard title="Dune" year={2021} /> من دون أن ينهار عند genres.join. تُطبَّق القيم الافتراضية حين يكون الـ prop غائبًا أو undefined، لكن ليس حين يكون null. إذا كانت بياناتك قد تحتوي على null، فتعامل معها صراحةً، باستخدام genres ?? [] مثلًا.

كائنات أم قيم مفردة؟

حين يكون الـ component متعلّقًا بشيء واحد، مرّر ذلك الشيء:

<MovieCard movie={movie} />

function MovieCard({ movie }) {
  return <h2>{movie.title}</h2>;
}

هذا يُبقي أماكن الاستدعاء قصيرة، ويجعل غرض الـ component واضحًا. وسترى أيضًا الـ spread، <MovieCard {...movie} />، الذي يمرّر كل حقل كـ prop مستقل. إنه مريح، لكنه يُخفي ما يستخدمه الـ component فعلًا، ويمرّر حقولًا لا يحتاجها. استخدمه باعتدال، وعادةً في components تغليف صغيرة تمرّر الـ props إلى عنصر.

ولتمرير القيم المفردة ميزته أيضًا: الـ component الذي يأخذ title وyear يستطيع عرض فيلم أو كتاب أو حلقة بودكاست. اختر بحسب مدى تخصّص الـ component. MovieCard متعلّق بالأفلام، فيكون movie={movie} طبيعيًا. أمّا Card العام فيجب أن يأخذ قيمًا بسيطة.

الـ props لقطات للقراءة فقط

لا يجوز للـ component أبدًا أن يغيّر الـ props الخاصة به. الـ props ملك لـ render الأب: إنها لقطة لما قرّره الأب في تلك اللحظة. وفي وضع التطوير تجمّد React كائن الـ props أصلًا، فيرمي الإسناد إليه خطأ.

إذن كيف تتغيّر البطاقة أصلًا؟ يرسمها الأب من جديد بـ props مختلفة. حين يصبح لدى App لاحقًا الأفلام في الـ state ويُعلَّم أحدها كمُشاهَد، يعيد App الـ render ويمرّر watched={true} إلى تلك البطاقة. البطاقة لا تحدّث نفسها؛ بل تُسلَّم بيانات جديدة. هذا التدفّق باتجاه واحد، من الأب إلى الابن، هو ما يجعل تطبيقات React قابلة للتوقّع: لتعرف لماذا تعرض بطاقةٌ شيئًا ما، تنظر إلى الأعلى في الشجرة.

تمرير الدوال

يمكن للـ props أن تكون أي قيمة، بما فيها الدوال. وهكذا يُخبر الابن أباه بأن شيئًا قد حدث:

<MovieCard movie={movie} onToggle={() => toggleWatched(movie.id)} />

البادئة on عُرف في تسمية الـ callback props، يتماشى مع أحداث الـ DOM مثل onClick. ستستخدم هذا النمط باستمرار في القسم 3، حيث يملك App الـ state ويطلب منه الأبناء تغييره.

أصبح ref مجرّد prop

أحيانًا يحتاج الأب إلى عقدة الـ DOM الفعلية داخل ابن، مثلًا لنقل التركيز إلى حقل العنوان بعد إضافة فيلم. في React 19 يستقبل الـ function component الـ ref كأي prop آخر ويمرّره إلى عنصر:

function TitleInput({ ref, ...rest }) {
  return <input ref={ref} {...rest} />;
}

الكود الأقدم يغلّف الـ components بـ forwardRef لفعل ذلك. لا تحتاجه في React 19، ومن المتوقّع أن يصبح متوقّفًا (deprecated). لكن هناك prop واحد ما زال مميّزًا: key، الذي ستقابله مع القوائم، تقرأه React ولا يصل أبدًا إلى الـ component الخاص بك.

تتيح الـ props للأب أن يضبط الابن بالبيانات. في الدرس التالي سترى كيف تمرّر أجزاء كاملة من JSX إلى component باستخدام children، وكيف يبني ذلك تخطيطات مرنة.