React-komponenter oppmuntrer til god praksis, men de kan være for restriktive. Lær hvordan du bryter formen.

Viktige takeaways

  • React Portals lar deg gjengi en komponents innhold utenfor dets overordnede komponenthierarkiet, noe som gjør det nyttig for UI-elementer som modaler og overlegg.
  • Portaler kan brukes i ulike scenarier som modaler, tredjepartsintegrasjoner, kontekstmenyer og verktøytips, noe som muliggjør fleksibel gjengivelse på forskjellige DOM-plasseringer.
  • Ved å bruke React Portals kan du skille UI-bekymringer fra hovedkomponenttreet, forbedre kodevedlikehold og enkelt kontrollere z-indeksen til komponenter for lagdeling og stabling av UI-elementer.

Moderne nettapplikasjoner trenger grensesnitt som inneholder elementer som modaler og verktøytips. Men disse UI-komponentene kan ikke alltid integreres godt med den eksisterende komponentstrukturen.

React tilbyr en løsning på dette problemet gjennom en funksjon kalt Portals.

Hva er React Portals?

React Portals gir en måte å gjengi en komponents innhold utenfor dens overordnede komponenthierarkiet. Med andre ord lar de deg gjengi en komponents utdata til et annet DOM-element som ikke er et underordnet av den gjeldende komponenten.

instagram viewer

Denne funksjonen er nyttig når du arbeider med UI-komponenter som må gjengis på et høyere nivå i DOM, for eksempel modaler eller overlegg.

Brukes for React-portaler

React Portals kommer godt med i ulike scenarier:

  • Modaler og overlegg. Når du trenger å vise modale dialoger eller overlegg, gjengi dem på toppnivået i DOM. Dette sikrer at foreldrenes stiler eller layout ikke begrenser dem.
  • Tredjepartsintegrasjoner. Ved integrering av tredjepartsbiblioteker som forventer gjengivelse på spesifikke DOM-plasseringer.
  • Kontekstmenyer. Lage kontekstmenyer som reagerer på brukerinteraksjoner, som du må plassere i forhold til viewporten eller et spesifikt DOM-element.
  • Verktøytips og popovers. Når du gjengir verktøytips eller popovers som må vises på toppen av andre komponenter, uavhengig av deres plassering i komponenttreet.

Hvordan React Portals fungerer

Tradisjonelt, når du gjengir en komponent i React, knytter du utdata til den overordnede komponentens DOM-node. Dette fungerer bra for de fleste scenarier, men det blir begrensende når du trenger å gjengi innhold utenfor foreldrenes hierarki.

Anta at du lager en modal dialog. Som standard vil du plassere modalens innhold i overordnet komponents DOM-node.

Dette kan føre til stilkonflikter og annen utilsiktet oppførsel siden modalens innhold arver stilene og begrensningene til de overordnede komponentene.

React Portals adresserer denne begrensningen ved å la deg spesifisere et mål-DOM-element der en komponents utdata skal gjengis.

Dette betyr at du kan gjengi et hvilket som helst UI-element utenfor forelderens DOM-hierarki, og bryte fri fra begrensningene til forelderens stiler og layout.

Slik bruker du React-portaler

Modaler er et perfekt eksempel på når du kan bruke React Portals. Denne eksempelkoden forklarer fremgangsmåten.

Sett opp en Basic React-applikasjon

Før du oppretter en portal, sørg for at du har en grunnleggende React-applikasjon satt opp. Du kan bruke verktøy som Create React App å raskt stillas et prosjekt.

Lag en portal for modaler

For å opprette en portal, bruk ReactDOM.createPortal() funksjon. Det krever to argumenter: innholdet du vil gjengi, og en referanse til DOM-noden for å gjengi det.

I dette eksemplet gjengir Modal-komponenten sine barn ved hjelp av en portal. Innholdet vil vises i DOM-elementet med ID-en "root".

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

Du kan definere innholdet i en bestemt Modal i en bestemt komponent. For eksempel inneholder denne ModalContent-komponenten et avsnitt og en Lukk knapp:

// Create a Modal Content Component
const ModalContent = ({ onClose }) => (
"modal">
"modal-content">
This is a modal content.</p>




exportdefault ModalContent;

Du kan deretter åpne Modal via et knappeklikk definert i App.js:

// Usage in App component
import { useState } from"react";
import Modal from"./Modal";
import ModalContent from"./ModalContent";
import"./App.css";
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);


const toggleModal = () => {
 setIsModalOpen(!isModalOpen);
 };


return (






exportdefault App;

I dette eksemplet gjengir Modal-komponenten innholdet ved hjelp av en portal, løsrevet fra hovedkomponenthierarkiet.

Eksempler fra den virkelige verden

React Portals er nyttige i ulike hverdagssituasjoner.

  • Varslingssystem: Når opprette et varslingssystem, vil du ofte ha meldinger øverst på skjermen, uansett hvor den gjeldende komponenten er.
  • Kontekstmeny: Kontekstmenyer skal dukke opp nær der brukeren klikker, uavhengig av hvor det er i DOM-hierarkiet.
  • Tredjepartsintegrasjon: Tredjepartsbiblioteker må ofte målrette mot vilkårlige deler av DOM.

Beste praksis for portalbruk

For å få mest mulig ut av React Portals, følg disse tipsene:

  • Velg de riktige sakene: Portaler er fleksible, men ikke alt trenger dem. Bruk portaler når vanlig gjengivelse forårsaker problemer eller sammenstøt.
  • Hold portalinnhold atskilt: Når du gjengir innhold gjennom portaler, må du sørge for at det er selvstendig. Det bør ikke stole på foreldrestiler eller kontekst.
  • Administrer hendelser og handlinger: Med portaler fungerer hendelser litt annerledes på grunn av det løsrevne innholdet. Håndter hendelsesforplantning og handlinger riktig.

Fordeler med React-portaler

React Portals tilbyr flere fordeler som kan forbedre utviklingen av komplekse brukergrensesnitt. De:

  • Bidra til å skille brukergrensesnittet fra hovedkomponenttreet, og forbedre kodens vedlikeholdbarhet og lesbarhet.
  • Gi fleksibilitet for komponenter som må vises utenfor overordnet komponent.
  • Gjør det enkelt å lage modaler og overlegg som er atskilt fra resten av brukergrensesnittet.
  • La deg enkelt kontrollere z-indeksen til komponentene, og sikre at du pent kan legge og stable UI-elementene dine.

Potensielle fallgruver og hensyn

Mens React Portals er nyttige, husk disse tingene:

  • CSS-problemer: Portaler kan forårsake uventet CSS-stiladferd siden de legger innhold utenfor overordnede komponenter. Bruk globale stiler eller administrer CSS-omfanget nøye.
  • Tilgjengelighet: Når du bruker portaler til å gjengi innhold, husk å holde tilgjengelighetsfunksjoner som tastaturnavigasjon og skjermleserkompatibilitet intakt.
  • Gjengivelse på serversiden: Det kan hende at portaler ikke passer godt sammen med server-side rendering (SSR). Forstå effektene og begrensningene ved å bruke portaler i SSR-oppsett.

Propelling UI Beyond the Norm

React Portals tilbyr en sterk løsning for å håndtere intrikate brukergrensesnittsituasjoner som krever at innhold vises utenfor grensene til overordnede komponenter.

Ved å forstå portaler og bruke beste praksis kan du bygge brukergrensesnitt som er mer tilpasningsdyktige og enklere å vedlikeholde, samtidig som du unngår problemer.

Enten du lager modaler eller henter inn tredjepartsbiblioteker, gir React Portals et kraftig svar for å møte krevende brukergrensesnittbehov.