Kako prikazati modale u Reactu

Programiranje

Modali mogu biti nezgodna tema u Reactu zbog načina na koji React strukturira DOM. Ako ste upoznati s osnovama React-a, znat ćete da je cijela aplikacija komponenta, koja se obično naziva i koja se dodaje kao dijete pod nazivom #root. Datoteka index.html izgleda ovako:

Jednom kada se komponenta generira u DOM, stvarni element s id-om "#root" dobiva cjelokupnu React aplikaciju koja se generira unutar nje.

Slijedom toga, uobičajeno je da se komponente React App vrlo duboko ugnijezde. Govorimo o desecima razina duboko, a često i više. Dakle, ako jedna od tih duboko ugniježđenih komponenata treba pokazati modalitet, suočit će se s nekim ozbiljnim CSS problemima.

Modali stavljaju sloj na zaslon i stoga imaju višu vizualnu prednost nad svim ostalim elementima. Da ga morate staviti u z-index izraze, to bi trebao biti najveći broj svih elemenata na zaslonu. Ali budući da je tako duboko ugniježđen, nadređeni elementi na putu prema drvetu imaju prednost u CSS-u.

Umjesto da dodirujemo CSS koji je možda fino podešen, pa bi tako petljanje tamo moglo pokvariti aplikaciju, moramo pronaći način da se prikažemo DOM-u - ali izvan dubokog gniježđenja .

Rješenje - Reagirajte na portalima

Jedna od strategija je korištenje ReactDOM portala i stavljanje modalnog u div koji je bratska komponenta u div s id-om "#root". Čineći to, CSS stilovi primijenjeni na div omotač modula primijenit će se samo u odnosu na njegovog brata ili sestru ("#root" div), a to neće razbiti CSS stil "#root".

Da bismo to učinili, trebamo koristiti createPortal()metodu ReactDOM. Portal je zapravo takav srodni div koji savija pravilo da sve komponente React-a moraju biti potomci . Da bismo to učinili moramo učiniti sljedeće:

  1. U index.html, unutar oznake: y> 
  You need to enable JavaScript to run this app. . //ADD THIS

2. Stvorite komponentu Modal.js ( imena klasa su iz semantic-UI ):

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;

Vidjet ćete da su createPortalpotrebna dva argumenta: neki JSX koji se generira i sličan ReactDOM.renderciljnom elementu pod kojim se JSX generira.

Ako generirate komponentu i prijeđete do nje, trebali biste vidjeti da se prilično dobro prikazuje. Sada trebate dodati odgovarajući onClick() rukovatelj za rukovanje događajima klikova unutar unutarnjeg modalnog korisničkog sučelja, kao i za udaljavanje od modalnog ako korisnik klikne izvan unutarnjeg modalnog korisničkog sučelja.

To biste željeli učiniti preslušavanjem klikova u pravom području i zaustavljanjem širenja tako da se pojave ispravna ponašanja ovisno o regiji u kojoj korisnik klikne.

Ponovna upotrebljivost

Gornji je primjer izuzetno osnovni i nije namijenjen da bude spreman za upotrebu isječka koda. Umjesto toga, ovo je rješenje za rješavanje modaliteta. Komponentu biste trebali apsolutno prilagoditi svojim potrebama. Upotrijebite React načela ponovne upotrebe kako biste bili sigurni da nećete teško kodirati podatke u Modalu i po potrebi prenijeti sadržaj i još manje widgete.

Na primjer, u jednom od svojih projekata predstavljam način na koji će korisnik izbrisati nešto iz baze podataka. Dakle, moja se komponenta, recimo, zove . Renderira se , što je prekrivač koji zatamnjuje osnovni zaslon.

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

Unutar /> 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