كيفية تصيير الوسائط في React

يمكن أن تكون الوسائط موضوعًا صعبًا في React بسبب طريقة بناء React في DOM. إذا كنت معتادًا على أساسيات React ، فستعرف أن التطبيق بأكمله عبارة عن مكون ، يُطلق عليه عادةً يتم إلحاقه كطفل يسمى # الجذر. يبدو ملف index.html كما يلي:

بمجرد تقديم المكون إلى DOM ، فإن العنصر الفعلي الذي يحمل المعرف “#root” يحصل على تطبيق React بالكامل داخله.

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

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

بدلاً من لمس CSS الذي قد يكون مضبوطًا بدقة ، وبالتالي قد يؤدي العبث إلى تعطل التطبيق ، نحتاج إلى إيجاد طريقة لتقديمها إلى DOM - ولكن خارج التداخل العميق .

الحل - رد الفعل البوابات

تتمثل إحدى الإستراتيجيات في استخدام بوابات ReactDOM ، ووضع الوسيط في div الذي يعد مكونًا شقيقًا لـ div مع المعرف "#root". من خلال القيام بذلك ، سيتم تطبيق أنماط CSS المطبقة على غلاف div الخاص بالشروط فقط فيما يتعلق بأخيه (“#root” div) ، ولن يؤدي ذلك إلى كسر نمط CSS لـ “#root”.

للقيام بذلك ، نحتاج إلى استخدام createPortal()طريقة ReactDOM. البوابة فعالة مثل div الشقيق ، الذي يثني القاعدة التي يجب أن تكون جميع مكونات React من نسلها . للقيام بذلك نحتاج إلى القيام بما يلي:

  1. في index.html ، داخل العلامة: y>
  You need to enable JavaScript to run this app. . //ADD THIS  

2. إنشاء مكون Modal.js ( أسماء الفئة مأخوذة من واجهة المستخدم الدلالية ):

import React from "react"; import ReactDOM from "react-dom"; const JSX_MODAL = ( THIS IS SOME TEXT IN THE MODAL // add some UI features here ); function Modal(props) { return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal")); } export default Modal;

createPortalستلاحظ أن هذا يأخذ وسيطتين: بعض JSX التي يتم تصييرها ، ومماثلة ReactDOM.renderللعنصر الهدف الذي يتم عرض JSX تحته.

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

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

إعادة الاستخدام

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

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

render() { return ( ); } renderActionButtons = () => { //return JSX that renders action buttons... return ( Delete Cancel ); };

في غضون /> is an inner component c alled rModal /> and this has the actual interactive component, with headers, content and text.

So my /> component creates props to pass down into <;Modal /> which in turn gets drille d down into <;InnerModal />, and so the render method in looks like:

…with the actual Modal Component looking like:

import React from "react"; import ReactDOM from "react-dom"; import ModalInner from './modal-inner' function Modal(props) { return ReactDOM .createPortal( , document.querySelector("#modal") //target DOM element ); } export default Modal;

and now, you’re finally able to render:

Voilà, there you have it! Modals, with React Portal! Hope you enjoyed this ?

And hope it saved you some ? ? ?…

If you would like to talk about your journey, I would love to listen. Tweet me @ZubinPratap. If you think what you just read could be useful to someone, please share it.

[Update] Quincy at FreeCodeCamp has relaunched the FreeCodeCamp podcast, and uses his incredible experience as an educator to pull together content that will help you on your journey. I was recently on episode 53 and if you’re new to development, you should check it out to see how many people are like us, and how much is possible for us! You can also access the podcast on iTunes, Stitcher, and Spotify or directly from this page.

Follow my Medium blog , my Github page and, if you’re so inclined, hit me up on LinkedIn.

Founder at Whooshka.me