تمرير الخصائص (Props) إلى مكون

تستخدم مكونات Reactالخصائص (props)للتواصل مع بعضها البعض. يمكن لكل مكون أب تمرير بعض المعلومات إلى مكوناته الفرعية عن طريق منحها خصائص. قد تذكرك الخصائص بسمات HTML، ولكن يمكنك تمرير أي قيمة JavaScript من خلالها، بما في ذلك الكائنات والمصفوفات والدوال.

خصائص مألوفة

الخصائص هي المعلومات التي تمررها إلى وسم JSX. على سبيل المثال،className،src،alt،width، وheightهي بعض الخصائص التي يمكنك تمريرها إلى<img>:

الخصائص التي يمكنك تمريرها إلى وسم<img>محددة مسبقًا (يتوافق ReactDOM معمعيار HTML). ولكن يمكنك تمرير أي خصائص إلى مكوناتكالخاصة، مثل <Avatar>، لتخصيصها. إليك الطريقة!

تمرير الخصائص إلى مكون

في هذا الكود، لا يمرر المكونProfileأي خصائص إلى مكونه الفرعي،Avatar:

يمكنك منحAvatarبعض الخصائص في خطوتين.

الخطوة 1: تمرير الخصائص إلى المكون الفرعي

أولاً، مرر بعض الخصائص إلىAvatar. على سبيل المثال، لنمرر خاصيتين:person(كائن)، وsize(رقم):

يمكنك الآن قراءة هذه الخصائص داخل مكونAvatar.

الخطوة 2: قراءة الخصائص داخل المكون الفرعي

يمكنك قراءة هذه الخصائص عن طريق سرد أسمائهاperson, sizeمفصولة بفواصل داخل({ و })مباشرة بعدfunction Avatar. يتيح لك ذلك استخدامها داخل كودAvatar، كما تفعل مع متغير.

أضف بعض المنطق إلىAvatarيستخدم خصائصperson و sizeللتقديم، وستكون قد انتهيت.

يمكنك الآن تكوينAvatarلتقديمه بطرق مختلفة كثيرة باستخدام خصائص مختلفة. جرب تعديل القيم!

تسمح لك الخاصيات (props) بالتفكير في المكونات الأصلية والفرعية بشكل مستقل. على سبيل المثال، يمكنك تغيير خاصيةpersonأو خاصيةsize داخل Profileدون الحاجة للتفكير في كيفية استخدامAvatarلها. وبالمثل، يمكنك تغيير طريقة استخدامAvatarلهذه الخاصيات، دون النظر إلىProfile.

يمكنك التفكير في الخاصيات (props) على أنها "مقابض" يمكنك ضبطها. تؤدي نفس الدور الذي تؤديه الوسائط (arguments) للدوال - في الواقع، الخاصياتهيالوسيط الوحيد لمكونك! تقبل دوال مكونات React وسيطًا واحدًا، وهو كائنprops:

عادة لا تحتاج إلى كائنpropsكامل بذاته، لذا يمكنك تفكيكه إلى خاصيات فردية.

تحديد قيمة افتراضية لخاصية

إذا كنت تريد إعطاء خاصية قيمة افتراضية تُستخدم كخيار احتياطي عندما لا يتم تحديد قيمة، يمكنك فعل ذلك مع التفكيك بوضع=والقيمة الافتراضية مباشرة بعد الوسيط:

الآن، إذا تم عرض<Avatar person={...} />بدون خاصيةsize، سيتم تعيينsize إلى 100.

تُستخدم القيمة الافتراضية فقط إذا كانت خاصيةsizeمفقودة أو إذا مررتsize={undefined}. ولكن إذا مررتsize={null}أوsize={0}، فلن تُستخدمالقيمة الافتراضية.

تمرير الخاصيات باستخدام تركيب الانتشار (spread) في JSX

في بعض الأحيان، يصبح تمرير الخاصيات مكررًا جدًا:

لا مشكلة في الكود المكرر - فقد يكون أكثر وضوحًا. ولكن في بعض الأحيان قد تفضل الإيجاز. بعض المكونات تمرر جميع خاصياتها إلى مكوناتها الفرعية، كما يفعل هذا المكونProfile مع Avatar. لأنها لا تستخدم أيًا من خاصياتها مباشرة، قد يكون من المنطقي استخدام تركيب "الانتشار" (spread) الأكثر إيجازًا:

هذا يمرر جميع خاصياتProfile إلى Avatarدون سرد كل اسم منها.

استخدم تركيب الانتشار باعتدال.إذا كنت تستخدمه في كل مكون آخر، فهناك خطأ ما. غالبًا ما يشير ذلك إلى أنه يجب عليك تقسيم مكوناتك وتمرير العناصر الفرعية كـ JSX. المزيد عن ذلك فيما يلي!

تمرير JSX كعناصر فرعية (children)

من الشائع تداخل علامات المتصفح المدمجة:

في بعض الأحيان، سترغب في تداخل مكوناتك الخاصة بنفس الطريقة:

عندما تتداخل محتوى داخل وسم JSX، سيستقبل المكون الأب ذلك المحتوى في خاصية تسمىchildren. على سبيل المثال، ستستقبل المكونCardأدناه خاصيةchildrenمعينة إلى<Avatar />وسيعرضها داخل غلاف div:

جرب استبدال<Avatar>داخل<Card>بنص ما لترى كيف يمكن للمكونCardأن يغلف أي محتوى متداخل. لا يحتاج إلى "معرفة" ما يتم عرضه بداخله. سترى هذا النمط المرن في العديد من الأماكن.

يمكنك التفكير في المكون الذي يحتوي على خاصيةchildrenعلى أنه يحتوي على "ثقب" يمكن "ملؤه" بواسطة المكونات الأب بأي JSX. غالبًا ما ستستخدم خاصيةchildrenفي الأغلفة المرئية: اللوحات، الشبكات، إلخ.

الرسم التوضيحي بواسطةRachel Lee Nabors

كيف تتغير الخصائص (props) مع مرور الوقت

يستقبل المكونClockأدناه خاصيتين من مكونه الأب:color و time. (تم حذف كود المكون الأب لأنه يستخدمالحالة (state)، وهو ما لن نخوض فيه الآن.)

جرب تغيير اللون في مربع الاختيار أدناه:

يوضح هذا المثال أنالمكون قد يستقبل خصائص مختلفة مع مرور الوقت.الخصائص ليست ثابتة دائمًا! هنا، تتغير الخاصيةtimeكل ثانية، وتتغير الخاصيةcolorعند اختيار لون آخر. تعكس الخصائص بيانات المكون في أي لحظة زمنية، وليس فقط في البداية.

ومع ذلك، فإن الخصائصغير قابلة للتغيير (immutable)—وهو مصطلح من علوم الكمبيوتر يعني "غير قابل للتغيير". عندما يحتاج المكون إلى تغيير خصائصه (على سبيل المثال، استجابةً لتفاعل المستخدم أو بيانات جديدة)، سيتعين عليه "أن يطلب" من مكونه الأب تمريرخصائص مختلفة—كائن جديد! بعد ذلك سيتم التخلص من خصائصه القديمة، وفي النهاية ستستعيد محرك جافا سكريبت الذاكرة التي تشغلها.

لا تحاول "تغيير الخصائص".عندما تحتاج إلى الاستجابة لإدخال المستخدم (مثل تغيير اللون المحدد)، ستحتاج إلى "تعيين الحالة (state)"، وهو ما يمكنك تعلمه فيالحالة: ذاكرة المكون.

ملخص

• لتمرير الخصائص (props)، أضفها إلى JSX تمامًا كما تفعل مع سمات HTML.
• لقراءة الخصائص، استخدم صيغة تفكيك الكائنfunction Avatar({ person, size }).
• يمكنك تحديد قيمة افتراضية مثلsize = 100، والتي تُستخدم للخصائص المفقودة أو ذات القيمةundefined.
• يمكنك تمرير جميع الخصائص باستخدام صيغة الانتشار في JSX<Avatar {...props} />، لكن لا تُفرط في استخدامها!
• JSX المتداخل مثل<Card><Avatar /></Card>سيظهر كخاصيةchildrenالخاصة بمكونCard.
• الخصائص (props) هي لقطات للقراءة فقط في لحظة زمنية: كل عملية عرض (render) تستقبل نسخة جديدة من الخصائص.
• لا يمكنك تغيير الخصائص. عندما تحتاج إلى تفاعلية، ستحتاج إلى تعيين حالة (state).