Arrival
\n2016
\nTo watch
\nالـ component المسمّى MovieCard من القسم 1 يقول «Arrival» دائمًا. والـ component الذي لا يعرض إلا فيلمًا واحدًا ليس قابلًا لإعادة الاستخدام؛ إنه قالب له استخدام واحد. الـ props تحلّ هذا: إنها الطريقة التي يسلّم بها الأب البيانات إلى الابن، تمامًا كما تسلّم البيانات إلى دالة عبر وسائطها.
مرّر الـ props كخصائص على وسم الـ component:
\nexport default function App() {\n return (\n <main>\n <MovieCard title=\"Arrival\" year={2016} watched />\n <MovieCard title=\"Past Lives\" year={2023} watched={false} />\n </main>\n );\n}تجمعها React في كائن واحد، { title: 'Arrival', year: 2016, watched: true }، وتمرّره كأول وسيط للـ component. وفي الغالب تفكّكه (destructuring) مباشرة في قائمة المعاملات:
export default function MovieCard({ title, year, watched }) {\n return (\n <article>\n <h2>{title}</h2>\n <p>{year}</p>\n <p>{watched ? 'Watched' : 'To watch'}</p>\n </article>\n );\n}ثلاث تفاصيل في الصياغة توقع الناس في الخطأ:
\nyear="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 قيمة افتراضية داخل نمط التفكيك:
\nexport default function MovieCard({ title, year, watched = false, genres = [] }) {\n return (\n <article>\n <h2>{title}</h2>\n <p>{year} · {genres.join(', ') || 'No genres yet'}</p>\n <p>{watched ? 'Watched' : 'To watch'}</p>\n </article>\n );\n}الآن يعمل <MovieCard title="Dune" year={2021} /> من دون أن ينهار عند genres.join. تُطبَّق القيم الافتراضية حين يكون الـ prop غائبًا أو undefined، لكن ليس حين يكون null. إذا كانت بياناتك قد تحتوي على null، فتعامل معها صراحةً، باستخدام genres ?? [] مثلًا.
حين يكون الـ component متعلّقًا بشيء واحد، مرّر ذلك الشيء:
\n<MovieCard movie={movie} />\n\nfunction MovieCard({ movie }) {\n return <h2>{movie.title}</h2>;\n}هذا يُبقي أماكن الاستدعاء قصيرة، ويجعل غرض الـ component واضحًا. وسترى أيضًا الـ spread، <MovieCard {...movie} />، الذي يمرّر كل حقل كـ prop مستقل. إنه مريح، لكنه يُخفي ما يستخدمه الـ component فعلًا، ويمرّر حقولًا لا يحتاجها. استخدمه باعتدال، وعادةً في components تغليف صغيرة تمرّر الـ props إلى عنصر.
ولتمرير القيم المفردة ميزته أيضًا: الـ component الذي يأخذ title وyear يستطيع عرض فيلم أو كتاب أو حلقة بودكاست. اختر بحسب مدى تخصّص الـ component. MovieCard متعلّق بالأفلام، فيكون movie={movie} طبيعيًا. أمّا Card العام فيجب أن يأخذ قيمًا بسيطة.
لا يجوز للـ component أبدًا أن يغيّر الـ props الخاصة به. الـ props ملك لـ render الأب: إنها لقطة لما قرّره الأب في تلك اللحظة. وفي وضع التطوير تجمّد React كائن الـ props أصلًا، فيرمي الإسناد إليه خطأ.
\n\nإذن كيف تتغيّر البطاقة أصلًا؟ يرسمها الأب من جديد بـ props مختلفة. حين يصبح لدى App لاحقًا الأفلام في الـ state ويُعلَّم أحدها كمُشاهَد، يعيد App الـ render ويمرّر watched={true} إلى تلك البطاقة. البطاقة لا تحدّث نفسها؛ بل تُسلَّم بيانات جديدة. هذا التدفّق باتجاه واحد، من الأب إلى الابن، هو ما يجعل تطبيقات React قابلة للتوقّع: لتعرف لماذا تعرض بطاقةٌ شيئًا ما، تنظر إلى الأعلى في الشجرة.
يمكن للـ props أن تكون أي قيمة، بما فيها الدوال. وهكذا يُخبر الابن أباه بأن شيئًا قد حدث:
\n<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 }) {\n return <input ref={ref} {...rest} />;\n}الكود الأقدم يغلّف الـ components بـ forwardRef لفعل ذلك. لا تحتاجه في React 19، ومن المتوقّع أن يصبح متوقّفًا (deprecated). لكن هناك prop واحد ما زال مميّزًا: key، الذي ستقابله مع القوائم، تقرأه React ولا يصل أبدًا إلى الـ component الخاص بك.
تتيح الـ props للأب أن يضبط الابن بالبيانات. في الدرس التالي سترى كيف تمرّر أجزاء كاملة من JSX إلى component باستخدام children، وكيف يبني ذلك تخطيطات مرنة.
watched = false) لا تُطبَّق إلا حين يكون الـ prop غائبًا أو undefined.","لا يجوز للـ component أبدًا أن يغيّر الـ props الخاصة به؛ ولتغيير ما يُعرض، يمرّر الأب props جديدة.","في React 19 أصبح ref مجرّد prop عادي في الـ function components، فلم تعد بحاجة إلى forwardRef."],"further":[{"title":"Passing Props to a Component","url":"https://react.dev/learn/passing-props-to-a-component"},{"title":"Keeping Components Pure","url":"https://react.dev/learn/keeping-components-pure"},{"title":"Manipulating the DOM with Refs (ref as a prop)","url":"https://react.dev/learn/manipulating-the-dom-with-refs"}],"quiz":[{"q":"ما الذي يستقبله MovieCard في year هنا؟ <MovieCard title="Arrival" year="2016" />
year={2016}."},{"text":"لا شيء، لأن year يجب أن يُعلَن مسبقًا.","why":"تقبل الـ components أي props تمرّرها؛ لا توجد خطوة إعلان في React مع JavaScript العادية."},{"text":"النص “2016”.","why":"صحيح. علامات الاقتباس تمرّر نصًا حرفيًا. يبدو العرض متطابقًا، لكن year + 1 يعطي “20161” بدلًا من 2017."},{"text":"خطأ، لأن الأرقام لا يمكن أن تكون props.","why":"أي قيمة JavaScript يمكن أن تكون prop، بما فيها الأرقام والكائنات والمصفوفات والدوال."}],"answer":2},{"q":"عُرِّف MovieCard بالشكل function MovieCard({ title, watched = false }). ويرسم الأب <MovieCard title="Dune" watched={null} />. ما قيمة watched داخل الـ component؟
null","why":"صحيح. القيم الافتراضية في التفكيك لا تحلّ إلا محلّ undefined. أمّا null الصريحة فتمرّ كما هي."},{"text":"false","why":"كانت القيمة الافتراضية ستُطبَّق لو كان الـ prop غائبًا أو undefined، لكن null قيمة حقيقية."},{"text":"undefined","why":"مرّر الأب null، وReact تمرّر الـ props كما هي."}],"answer":0},{"q":"المقصود من هذا الـ component أن يعرض السنة بالشكل “(2016)”. ما الخطأ فيه؟
\nfunction MovieCard(props) {\n props.year = `(${props.year})`;\n return <p>{props.title} {props.year}</p>;\n}this.props بدلًا من ذلك.","why":"this.props خاص بالـ class components. أمّا الـ function components فتستقبل الـ props كوسيط."},{"text":"إنه يعدّل الـ props. احسب قيمة جديدة بدلًا من ذلك، مثل const label = '(' + year + ')'.","why":"صحيح. الـ props لقطات للقراءة فقط. في وضع التطوير تجمّد React كائن الـ props، فيرمي الإسناد TypeError، وحتى لو لم يفعل، لاختفى التغيير في الـ render التالي."}],"answer":3},{"q":"لديك كائن movie فيه id وtitle وyear وwatched. ولا يعرض MovieItem إلا العنوان وحالة المشاهدة. أيّ استدعاء هو الخيار الافتراضي الأوضح؟
<MovieItem {...movie} />، لأن الـ spread أقصر.","why":"الـ spread يُخفي الـ props التي يستخدمها الـ component فعلًا، ويمرّر id وyear اللذين لا يحتاجهما. مقبول أحيانًا، لكنه غير واضح كعادة."},{"text":"<MovieItem movie={movie} />، ويقرأ الـ component القيمتين movie.title وmovie.watched.","why":"صحيح. تمرير الكائن كاملًا يُبقي الاستدعاءات قصيرة، وهو خيار افتراضي شائع ومقروء حين يكون الـ component متعلّقًا بذلك الشيء."},{"text":"<MovieItem data={JSON.stringify(movie)} />","why":"يمكن للـ props أن تكون كائنات. التحويل إلى نص يضيف عملًا ويُضيّع البنية."}],"answer":1}],"exercise":{"kind":"web","mode":"react","starter":{"jsx":"function MovieCard() {\n return (\n 2016
\nTo watch
\n{year}
\n{watched ? 'Watched' : 'To watch'}
\nكل البطاقات تقول “Arrival”. امنح MovieCard ثلاثة props، هي title وyear وwatched، واستخدمها:
<h2> العنوان، ويعرض <p> السنة.<p> آخر النص Watched حين تكون watched صحيحة، والنص To watch في غير ذلك. اجعل القيمة الافتراضية لـ watched هي false.ثم اعرض هذه البطاقات الثلاث في App بهذا الترتيب:
| title | \nyear | \nwatched | \n
|---|---|---|
| Arrival | \n2016 | \ntrue | \n
| Past Lives | \n2023 | \n(لا تمرّرها) | \n
| Paddington 2 | \n2017 | \nfalse | \n
function MovieCard({ title, year, watched = false }).","الأرقام والقيم المنطقية توضع بين أقواس معقوصة: year={2016}. والخاصية المجرّدة watched تعني watched={true}.","اختر نص الحالة بالمعامل الثلاثي: {watched ? 'Watched' : 'To watch'}."],"explanation":"صار MovieCard الآن دالة في الـ props الخاصة به. القيمة الافتراضية watched = false تغطّي بطاقة Past Lives التي لا تمرّر هذا الـ prop أصلًا، فتصل watched بقيمة undefined وتُطبَّق القيمة الافتراضية. الأرقام والقيم المنطقية تحتاج إلى أقواس معقوصة؛ أمّا year="2016" بين علامتي اقتباس فيمرّر نصًا، يبدو متطابقًا هنا لكنه يتصرّف بشكل مختلف في العمليات الحسابية والمقارنات.