React Portals: Udvid din værktøjskasse ud over propboring

Nøgle takeaways

• React Portals giver dig mulighed for at gengive en komponents indhold uden for dens overordnede komponenthierarki, hvilket gør det nyttigt til UI-elementer som modals og overlays.
• Portaler kan bruges i forskellige scenarier såsom modaler, tredjepartsintegrationer, kontekstmenuer og værktøjstip, hvilket giver mulighed for fleksibel gengivelse på forskellige DOM-lokationer.
• Ved at bruge React Portals kan du adskille UI-bekymringer fra hovedkomponenttræet, forbedre kodevedligeholdelse og nemt kontrollere komponenternes z-indeks til lagdeling og stabling af UI-elementer.

Moderne webapplikationer har brug for grænseflader, der indeholder elementer som modaler og værktøjstip. Men disse UI-komponenter kan ikke altid integreres godt med den eksisterende komponentstruktur.

React tilbyder en løsning på dette problem gennem en funktion kaldet Portals.

Hvad er React Portals?

React Portals giver en måde at gengive en komponents indhold uden for dens overordnede komponenthierarki. Med andre ord giver de dig mulighed for at gengive en komponents output til et andet DOM-element, som ikke er et underordnet af den aktuelle komponent.

Denne funktion er praktisk, når du har at gøre med UI-komponenter, der skal gengives på et højere niveau i DOM, såsom modals eller overlays.

Bruges til React-portaler

React-portaler er nyttige i forskellige scenarier:

• Modaler og overlejringer. Når du har brug for at vise modale dialoger eller overlejringer, skal du gengive dem på det øverste niveau af DOM. Dette sikrer, at deres forældres stile eller layout ikke begrænser dem.
• Tredjeparts integrationer. Ved integration af tredjepartsbiblioteker, der forventer gengivelse på specifikke DOM-lokationer.
• Kontekstmenuer. Oprettelse af kontekstmenuer, der reagerer på brugerinteraktioner, som du skal placere i forhold til viewporten eller et specifikt DOM-element.
• Værktøjstip og popovers. Ved gengivelse af værktøjstip eller popovers, der skal vises oven på andre komponenter, uanset deres placering i komponenttræet.

Sådan fungerer React-portaler

Traditionelt, når du gengiver en komponent i React, vedhæfter du dens output til den overordnede komponents DOM-node. Dette fungerer godt for de fleste scenarier, men det bliver begrænsende, når du skal gengive indhold uden for forældrenes hierarki.

Antag, at du opretter en modal dialog. Som standard placerer du modalens indhold i overordnede komponents DOM-node.

Dette kan føre til stilkonflikter og anden utilsigtet adfærd, da modalens indhold arver stilene og begrænsningerne for dets overordnede komponenter.

React Portals adresserer denne begrænsning ved at lade dig specificere et mål-DOM-element, hvor en komponents output skal gengives.

Dette betyder, at du kan gengive et hvilket som helst UI-element uden for overordnets DOM-hierarki, og bryde fri fra begrænsningerne i overordnets stilarter og layout.

Sådan bruger du React-portaler

Modals er et perfekt eksempel på, hvornår du kan bruge React Portals. Denne eksempelkode forklarer proceduren.

Konfigurer en Basic React-applikation

Før du opretter en portal, skal du sørge for at have en grundlæggende React-applikation opsat. Du kan bruge værktøjer som Create React App for hurtigt at stilladsere et projekt.

Opret en portal for modaler

For at oprette en portal skal du bruge ReactDOM.createPortal() fungere. Det kræver to argumenter: det indhold, du vil rendere, og en reference til DOM-noden for at gengive det.

I dette eksempel gengiver Modal-komponenten sine børn ved hjælp af en portal. Indholdet vises i DOM-elementet med ID'et '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 indholdet af en specifik Modal i en specifik komponent. For eksempel indeholder denne ModalContent-komponent et afsnit og en Tæt knap:

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

exportdefault ModalContent;

Du kan derefter åbne Modal via et knapklik defineret 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 (



Open Modal</button>
 {isModalOpen && (


 </Modal>
 )}
 </div>
 );
};
exportdefault App;

I dette eksempel gengiver Modal-komponenten sit indhold ved hjælp af en portal, adskilt fra hovedkomponenthierarkiet.

Eksempler fra den virkelige verden

React Portals er nyttige i forskellige hverdagssituationer.

• Notifikationssystem: Hvornår oprettelse af et meddelelsessystem, vil du ofte have beskeder øverst på skærmen, uanset hvor den aktuelle komponent er.
• Kontekstmenu: Kontekstmenuer skal dukke op tæt på, hvor brugeren klikker, uanset hvor det er i DOM-hierarkiet.
• Tredjepartsintegration: Tredjepartsbiblioteker skal ofte målrette mod vilkårlige dele af DOM.

Bedste praksis for portalbrug

For at få mest muligt ud af React Portals, følg disse tips:

• Vælg de rigtige sager: Portaler er fleksible, men ikke alt har brug for dem. Brug portaler, når regelmæssig gengivelse forårsager problemer eller sammenstød.
• Hold portalindhold adskilt: Når du gengiver indhold gennem portaler, skal du sørge for, at det er selvstændigt. Det bør ikke stole på forældrestile eller kontekst.
• Administrer begivenheder og handlinger: Med portaler fungerer begivenheder lidt anderledes på grund af det løsrevne indhold. Håndter hændelsesudbredelse og handlinger korrekt.

Fordele ved React-portaler

React Portals tilbyder flere fordele, der kan forbedre udviklingen af ​​komplekse brugergrænseflader. De:

• Hjælp med at adskille UI-bekymringer fra hovedkomponenttræet, hvilket forbedrer kodevedligeholdelse og læsbarhed.
• Giver fleksibilitet til komponenter, der skal vises uden for deres overordnede komponent.
• Gør det nemt at oprette modals og overlejringer, der er adskilt fra resten af ​​brugergrænsefladen.
• Lad dig nemt styre komponenternes z-indeks, hvilket sikrer, at du pænt kan placere og stable dine UI-elementer.

Potentielle faldgruber og overvejelser

Mens React Portals er nyttige, skal du huske disse ting:

• CSS-problemer: Portaler kan forårsage uventet CSS-stiladfærd, da de placerer indhold uden for overordnede komponenter. Brug globale stilarter eller administrer CSS-omfang omhyggeligt.
• Tilgængelighed: Når du bruger portaler til at gengive indhold, skal du huske at holde tilgængelighedsfunktioner som tastaturnavigation og skærmlæserkompatibilitet intakte.
• Gengivelse på serversiden: Portaler passer muligvis ikke godt sammen med server-side rendering (SSR). Forstå virkningerne og begrænsningerne ved at bruge portaler i SSR-opsætninger.

Fremdrivende UI Beyond the Norm

React Portals tilbyder en stærk løsning til håndtering af indviklede UI-situationer, der kræver, at indhold vises ud over grænserne for overordnede komponenter.

Ved at forstå portaler og bruge bedste praksis kan du bygge brugergrænseflader, der er mere tilpasningsdygtige og nemmere at vedligeholde, alt imens du undgår problemer.

Uanset om du laver modals eller henter tredjepartsbiblioteker, giver React Portals et kraftfuldt svar til at imødekomme krævende brugergrænsefladebehov.