Sådan gengives modeller i React

Modaler kan være et vanskeligt emne i React på grund af den måde, React strukturer DOM på. Hvis du er bekendt med det grundlæggende i React, ved du, at hele appen er en komponent, der normalt kaldes, der bliver tilføjet som et barn, der hedder #root. Index.html-filen ser sådan ud:

Når komponenten bliver gengivet til DOM, får det faktiske element med id "#root" hele React-appen gengivet inde i den.

Derfor er det ret almindeligt, at React App Components bliver meget dybt indlejrede. Vi taler snesevis af niveauer dybt og ofte mere. Så hvis en af ​​disse dybt indlejrede komponenter skal vise et modal, vil den stå over for nogle alvorlige CSS-problemer.

Modaler lægger et overlay på skærmen og har derfor en højere visuel forrang over alle andre elementer. Hvis du skulle sætte det i z-indeks termer, skulle det være det højeste antal af alle elementerne på skærmen. Men da det er så dybt indlejret, har forældrelementerne langt op i træet CSS-forrang.

I stedet for at røre ved CSS, som kan være finjusteret, og så fidding der kunne bryde appen, er vi nødt til at finde en måde at gengive til DOM - men uden for den dybe indlejring .

Løsning - Reager portaler

En strategi er at bruge ReactDOM-portaler og placere modalet i en div, der er en søskenkomponent til div med id "#root". Ved at gøre dette gælder de CSS-stilarter, der anvendes på modalets div-indpakning, kun i forhold til dets søskende ("#root" div), og det bryder ikke CSS-stylingen af ​​"#root".

For at gøre det skal vi bruge createPortal()metoden til ReactDOM. En portal er faktisk sådan en søskendiv, der bøjer reglen om, at alle React-komponenter skal være efterkommere af . For at gøre det skal vi gøre følgende:

  1. I index.html inde i tagget: y>
  You need to enable JavaScript to run this app. . //ADD THIS  

2. Opret en Modal.js-komponent ( classNames er fra 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;

Du vil se, at der createPortalkræves to argumenter: noget JSX, der bliver gengivet, og ligner ReactDOM.renderdet målelement, hvorunder JSX bliver gengivet.

Hvis du gengiver komponenten og navigerer til den, skal du finde den vises ganske godt. Du skal nu tilføje den relevante onClick() handler til at håndtere klikhændelser inde i det indre modale brugergrænseflade såvel som at navigere væk fra modalet, hvis brugeren klikker uden for det indre modale brugergrænseflade.

Du vil gerne gøre dette ved at lytte efter klik i det rigtige område og derefter stoppe udbredelsen, så den rigtige adfærd opstår afhængigt af det område, hvor brugeren klikker.

Genanvendelighed

Ovenstående eksempel er ekstremt grundlæggende og er ikke beregnet til at være en klar til brug kodestykke. Dette er snarere en løsning til tackling af modeller. Du skal absolut tilpasse komponenten efter dine behov. Brug React-principperne for genanvendelighed for at sikre, at du ikke koder data hårdt i Modal, og videregive indholdet og endda mindre widgets efter behov.

For eksempel præsenterer jeg et modal i et af mine projekter, når brugeren skal slette noget fra databasen. Så min komponent kaldes f.eks . Det gengives , hvilket er det overlay, der dæmper den underliggende skærm.

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

Inden for /> 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