A modálok renderelése a React-ben

A modálok bonyolult témát jelenthetnek a React-ben, mivel a React felépíti a DOM-ot. Ha ismeri a React alapjait, akkor tudja, hogy a teljes alkalmazás egy olyan összetevő, amelyet általában úgy hívnak, hogy a #root nevű gyermekként csatolja. Az index.html fájl így néz ki:

Amint a komponens megjelenik a DOM-ban, a „#root” azonosítójú tényleges elem megjeleníti benne a teljes React alkalmazást.

Következésképpen elég gyakori, hogy a React App Components nagyon mélyen beágyazódik. Több tucat szintről beszélünk, és gyakran többről is. Tehát, ha az egyik mélyen beágyazott alkatrésznek modált kell mutatnia, akkor komoly CSS problémákkal kell szembenéznie.

A modálok egy fedvényt helyeznek el a képernyőn, ezért nagyobb vizuális elsőbbséget élveznek az összes többi elem felett . Ha z-indexben kellene megfogalmazni, akkor a képernyőn szereplő elemek közül a legnagyobbnak kell lennie. De mivel olyan mélyen be van ágyazva, a fán felfelé vezető szülő elemek CSS-t élveznek.

Ahelyett, hogy megérintenénk a CSS-t, amelyet finomra lehet hangolni, és így a ficánkolás megtörheti az alkalmazást, meg kell találnunk a módját, hogyan lehet a DOM felé továbbítani - de a mély fészkelésen kívül .

Megoldás - Reagáljon a portálokra

Az egyik stratégia a ReactDOM portálok használata, és a modális elhelyezése egy div-ben, amely testvér komponens a div azonosítójú „#root” azonosítóval. Ezzel a modális div burkolójára alkalmazott CSS stílusok csak a testvérére (az „#root” div) vonatkoznak, és ez nem fogja megszakítani az „#root” CSS stílusát.

Ehhez createPortal()a ReactDOM módszerét kell használnunk. A portál gyakorlatilag egy olyan testvér div, amely meghajlítja azt a szabályt, amelynek minden React komponensnek leszármazottjának kell lennie . Ehhez a következőket kell tennünk:

  1. Az index.html fájlban a címke belsejében : y>
  You need to enable JavaScript to run this app. . //ADD THIS  

2. Hozzon létre egy Modal.js összetevőt (az osztálynév a szemantikus felhasználói felületről származik ):

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;

Látni fogja, hogy createPortalkét argumentumra van szükség: néhány JSX, amely megjelenik, és hasonló ahhoz ReactDOM.rendera célelemhez, amely alatt a JSX megjelenik.

Ha rendereli az összetevőt és navigál hozzá, akkor meg kell találnia, hogy elég jól megjelenik. Most hozzá kell adnia a megfelelő onClick() kezelőt a belső modális felhasználói felületen belüli kattintási események kezeléséhez, valamint a modáltól való eligazodáshoz, ha a felhasználó a belső modális felhasználói felületen kívül kattint.

Ezt úgy szeretné megtenni, hogy meghallgatja a kattintásokat a megfelelő területen, majd leállítja a terjedést, hogy a megfelelő viselkedés a régiótól függ, ahol a felhasználó kattint.

Újrahasználhatóság

A fenti példa rendkívül egyszerű, és nem célja, hogy használatra kész kódrészlet legyen. Inkább ez a megoldás a modálok kezelésére. Teljesen testre kell szabnia az alkatrészt az Ön igényeinek megfelelően. Használja a React újrafelhasználhatósági elveket annak biztosítására, hogy ne kódolja az adatokat szigorúan a Modal, és szükség szerint adja át a tartalmat és a még kisebb modulokat.

Például az egyik projektemben bemutatok egy modált, amikor a felhasználó törölni akar valamit az adatbázisból. Tehát az alkotóelemet mondjuk hívják . Megjeleníti , ez az a fedvény, amely elsötétíti az alapul szolgáló képernyőt.

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

Belül /> 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