من المحتمل أنك قمت بتمرير الدعائم من المكونات الأصلية إلى المكونات الفرعية، وقد سألت نفسك: "حسنًا... ولكن ماذا لو كنت أرغب في تمرير الدعائم من المكونات الفرعية إلى المكونات الأصلية؟ أعني... في الاتجاه المعاكس ؟"، يمين؟ ؟ لقد تساءلت أيضًا عن ذلك، لكن هناك حلولًا في الواقع.

سوف نتعرف عليهم.

ما هو التدفق النموذجي للدعائم؟

التدفق النموذجي للدعائم هو من الوالدين إلى الطفل. في الأساس، لنفترض أن لديك مكونًا رئيسيًا يبدو كما يلي:

يستخدم المكون الفرعي الموجود أدناه مكون Button من مكتبة مكونات shadcn/ui المحبوبة جدًا. يحتوي مكون الزر على خاصية فرعية، يتم تمريرها من المكون الأصلي.

أعلاه، نقوم بتمرير دعامة فرعية من المكون الأصل إلى المكون الفرعي. كل شيء جيد حتى الآن، أليس كذلك؟

ماذا لو أردنا تمرير الدعائم من الطفل إلى الوالدين؟

الآن، هذا هو المكان الذي تصبح فيه الأمور صعبة بعض الشيء، خاصة إذا كانت هذه هي المرة الأولى التي تقوم فيها بتنفيذ مثل هذا المنطق. ربما لا يكون الجزء الصعب في الأمر هو كيفية القيام بذلك، ولكن كيفية تصوره. وفي كلتا الحالتين، لقد كنت هناك، وآمل أن تساعدك تجربتي؟

نظرًا لأن التعلم يتم بشكل أفضل من خلال الممارسة، فلنحضر المثال السابق ونعدله قليلاً لنرى كيف يمكننا تمرير الدعائم من الطفل إلى الوالدين. الهدف من هذا المثال هو إظهار كيف يمكننا تعديل حالة المكون الأصلي عن طريق تمرير البيانات من المكون الفرعي.

وهذا ما نقوم به من مكون الطفل:

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

خطأ شائع أثناء نقل البيانات من الطفل إلى الوالدين

تمرير البيانات من المكون الفرعي إلى الأصل له مراوغاته. أحد الأخطاء الأكثر شيوعًا هو نسيان تمرير وظيفة رد الاتصال كدعم للمكون الفرعي، ولكن هذا يعني أيضًا أنك تمرر المزيد من المنطق الذي تحتاج إلى تمريره. يمكن أن يؤدي هذا إلى مزيد من الإزعاج وصعوبة تصحيح الأخطاء.

إحدى الطرق لمنع ذلك هي استخدام خطاف useCallback، الذي يتأكد من أن الوظيفة التي تمررها كرد اتصال للمكون الفرعي تظل مستقرة عبر عمليات العرض، مما يمنع عمليات إعادة العرض غير الضرورية ويحسن الأداء. ما يحدث مع useCallback هو أنك تقوم بتمرير دالة كخاصية إلى المكون الفرعي، وسيتمكن المكون الفرعي من الوصول إلى الوظيفة، ويمكنه استدعاؤها عند الحاجة. دعونا نرى كيف يمكننا القيام بذلك.

الآن دعونا نظهر كيف يبدو في المكون الفرعي:

أليس هذا أنظف من تمرير الوظيفة ثم تحديثها من الطفل ثم تمريرها مرة أخرى إلى الوالدين؟ أنظف وأسهل في التنفيذ أيضًا، أليس كذلك؟ ?

شكرا لك على القراءة!

على الرغم من أن هناك بالتأكيد طرقًا أكثر وأكثر نظافة وأفضل مظهرًا لتمرير البيانات من الطفل إلى الوالدين في React، إلا أنني آمل أنه بعد قراءة مقالتي، ستجد أنه من الأسهل فهم تدفق كيفية مرور البيانات من الطفل إلى الوالدين، وكيفية تنفيذ ذلك بطريقتين مختلفتين. من يدري، ربما ستجد طريقة أكثر إبداعًا للقيام بذلك بنفسك؟ ؟ إذا كان الأمر كذلك، سيكون موضع تقدير كبير لشرح أفكارك في التعليقات!

عن المؤلف

أنا مطور برامج وكاتب تقني مقيم في البرتغال. أنا شغوف بهندسة البرمجيات ?‍? وأحب استكشاف أدوات جديدة في حياتي اليومية، وإيجاد حلول مثيرة للاهتمام ومبتكرة للأعمال المشتركة والمشكلات الفنية. يمكنك أن تجدني على جيثب. إذا كان لديك أي أسئلة أو تعليقات، فلا تتردد في التواصل معنا! ?