Reacti Portaalide Meisterdamine: Komponentide Renderdamine Väljaspool DOM-i Hierarhiat

Kaasaegse veebiarenduse laial maastikul on React andnud lugematutele arendajatele üle maailma võimaluse luua dünaamilisi ja väga interaktiivseid kasutajaliideseid. Selle komponendipõhine arhitektuur lihtsustab keerukaid UI struktuure, edendades taaskasutatavust ja hooldatavust. Kuid isegi Reacti elegantse disaini puhul satuvad arendajad aeg-ajalt stsenaariumidele, kus standardne komponentide renderdamise lähenemine – kus komponendid renderdavad oma väljundi oma vanema DOM-elemendi lastena – seab olulisi piiranguid.

Mõelge modaalaknale, mis peab ilmuma kogu muu sisu kohale, teavitusribale, mis hõljub globaalselt, või kontekstimenüüle, mis peab pääsema välja ülevoolava vanemkonteineri piiridest. Sellistes olukordades võib tavapärane lähenemine komponentide renderdamiseks otse nende vanema DOM-i hierarhias põhjustada väljakutseid stiilimisega (nagu z-indeksi konfliktid), paigutusprobleeme ja sündmuste levimise keerukust. See on täpselt koht, kus Reacti Portaalid astuvad esile kui võimas ja asendamatu tööriist Reacti arendaja arsenalis.

See põhjalik juhend süveneb Reacti Portaali mustrisse, uurides selle põhimõisteid, praktilisi rakendusi, täiustatud kaalutlusi ja parimaid tavasid. Olenemata sellest, kas olete kogenud Reacti arendaja või alles alustate oma teekonda, avab portaalide mõistmine uusi võimalusi tõeliselt robustsete ja globaalselt ligipääsetavate kasutajakogemuste loomiseks.

Põhiprobleemi Mõistmine: DOM-i Hierarhia Piirangud

Reacti komponendid renderdavad vaikimisi oma väljundi oma vanemkomponendi DOM-sõlme. See loob otsese vastavuse Reacti komponendipuu ja brauseri DOM-puu vahel. Kuigi see suhe on intuitiivne ja üldiselt kasulik, võib see muutuda takistuseks, kui komponendi visuaalne esitus peab vabanema oma vanema piirangutest.

Levinud Stsenaariumid ja Nende Valupunktid:

• Modaalaknad, Dialoogid ja Lightboxid: Need elemendid peavad tavaliselt katma kogu rakenduse, olenemata sellest, kus need komponendipuus on määratletud. Kui modaalaken on sügavalt pesastatud, võib selle CSS `z-index` olla piiratud tema esivanemate poolt, mis teeb selle alati peal kuvamise tagamise keeruliseks. Lisaks võib vanemelemendi `overflow: hidden` kärpida modaalakna osi.
• Tööriistavihjed ja Hüpikaknad: Sarnaselt modaalakendega peavad tööriistavihjed või hüpikaknad sageli positsioneerima end elemendi suhtes, kuid ilmuma väljaspool selle potentsiaalselt piiratud vanemkonteineri piire. Vanema `overflow: hidden` võib tööriistavihje ära lõigata.
• Teavitused ja Toast-Sõnumid: Need globaalsed sõnumid ilmuvad sageli vaateakna üla- või alaosas, nõudes, et neid renderdataks sõltumatult komponendist, mis need käivitas.
• Kontekstimenüüd: Paremklõpsu menüüd või kohandatud kontekstimenüüd peavad ilmuma täpselt sinna, kuhu kasutaja klõpsab, sageli murdes välja piiratud vanemkonteineritest, et tagada täielik nähtavus.
• Kolmandate Osapoolte Integratsioonid: Mõnikord peate võib-olla renderdama Reacti komponendi DOM-sõlme, mida haldab väline teek või pärandkood, väljaspool Reacti juurt.

Igas neist stsenaariumidest viib soovitud visuaalse tulemuse saavutamine ainult standardse Reacti renderdamise abil sageli keerulise CSS-i, liigsete `z-index` väärtuste või keeruka positsioneerimisloogikani, mida on raske hooldada ja skaleerida. See on koht, kus Reacti Portaalid pakuvad puhast ja idiomaatilist lahendust.

Mis Täpselt on Reacti Portaal?

Reacti Portaal pakub esmaklassilist viisi laste renderdamiseks DOM-sõlme, mis eksisteerib väljaspool vanemkomponendi DOM-i hierarhiat. Hoolimata renderdamisest teise füüsilisse DOM-elementi, käitub portaali sisu endiselt nii, nagu oleks see otsene laps Reacti komponendipuus. See tähendab, et see säilitab sama Reacti konteksti (nt Context API väärtused) ja osaleb Reacti sündmuste mullitamise süsteemis.

Reacti Portaalide tuum peitub `ReactDOM.createPortal()` meetodis. Selle signatuur on lihtne:

ReactDOM.createPortal(child, container)

• child: Igasugune renderdatav Reacti laps, näiteks element, string või fragment.
• container: DOM-element, mis juba dokumendis eksisteerib. See on siht-DOM-sõlm, kuhu `child` renderdatakse.

Kui kasutate `ReactDOM.createPortal()`, loob React uue virtuaalse DOM-i alampuu määratud `container` DOM-sõlme alla. Kuid see uus alampuu on endiselt loogiliselt ühendatud komponendiga, mis portaali lõi. See "loogiline ühendus" on võti mõistmaks, miks sündmuste mullitamine ja kontekst jaotavad ootuspäraselt.

Oma Esimese Reacti Portaali Seadistamine: Lihtne Modaalakna Näide

Vaatame läbi levinud kasutusjuhtumi: modaalakna loomine. Portaali rakendamiseks vajate esmalt siht-DOM-elementi oma `index.html`-is (või kus iganes teie rakenduse juur-HTML-fail asub), kuhu portaali sisu renderdatakse.

Samm 1: Valmistage Ette Siht-DOM-sõlm

Avage oma `public/index.html` fail (või samaväärne) ja lisage uus `div` element. Tavapärane on lisada see vahetult enne sulgevat `body` silti, väljaspool teie peamist Reacti rakenduse juurt.

<body>
  <!-- Teie peamine Reacti rakenduse juur -->
  <div id="root"></div>

  <!-- Siia renderdatakse meie portaali sisu -->
  <div id="modal-root"></div>
</body>

Samm 2: Looge Portaali Komponent

Nüüd loome lihtsa modaalakna komponendi, mis kasutab portaali.

// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

const Modal = ({ children, isOpen, onClose }) => {
  const el = useRef(document.createElement('div'));

  useEffect(() => {
    // Lisa div modaali juurele, kui komponent laetakse
    modalRoot.appendChild(el.current);

    // Koristus: eemalda div, kui komponent eemaldatakse
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // Tühi sõltuvuste massiiv tähendab, et see käivitub korra laadimisel ja korra eemaldamisel

  if (!isOpen) {
    return null; // Ära renderda midagi, kui modaalaken pole avatud
  }

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000 // Veendu, et see on pealmine
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        maxWidth: '500px',
        width: '90%'
      }}>
        {children}
        <button onClick={onClose} style={{ marginTop: '15px' }}>Sulge Modaalaken</button>
      </div>
    </div>,
    el.current // Renderda modaali sisu meie loodud div'i, mis on modalRoot'i sees
  );
};

export default Modal;

Selles näites loome iga modaalakna eksemplari jaoks uue `div` elemendi (`el.current`) ja lisame selle `modal-root`i. See võimaldab meil hallata mitut modaalakent, kui vaja, ilma et need üksteise elutsüklit või sisu segaksid. Tegelik modaali sisu (ülekattekiht ja valge kast) renderdatakse seejärel sellesse `el.current` elementi, kasutades `ReactDOM.createPortal`.

Samm 3: Kasutage Modaalakna Komponenti

// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Eeldades, et Modal.js on samas kaustas

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>Reacti Portaali Näide</h1>
      <p>See sisu on osa peamisest rakenduse puust.</p>
      <button onClick={handleOpenModal}>Ava Globaalne Modaalaken</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>Tervitused Portaalist!</h3>
        <p>See modaalakna sisu on renderdatud väljaspool 'root' div'i, kuid seda haldab endiselt React.</p>
      </Modal>
    </div>
  );
}

export default App;

Kuigi `Modal` komponent on renderdatud `App` komponendi sees (mis ise on `root` div'i sees), ilmub selle tegelik DOM-väljund `modal-root` div'i sisse. See tagab, et modaalaken katab kõik ilma `z-index`i või `overflow` probleemideta, samal ajal saades kasu Reacti olekuhaldusest ja komponendi elutsüklist.

Reacti Portaalide Peamised Kasutusjuhud ja Täiustatud Rakendused

Kuigi modaalaknad on oluline näide, ulatub Reacti Portaalide kasulikkus palju kaugemale lihtsatest hüpikakendest. Uurime täpsemaid stsenaariume, kus portaalid pakuvad elegantseid lahendusi.

1. Robustsed Modaalaknad ja Dialoogisüsteemid

Nagu näha, lihtsustavad portaalid modaalakende rakendamist. Peamised eelised on järgmised:

• Garanteeritud Z-Indeks: Renderdades `body` tasemel (või spetsiaalses kõrgetasemelises konteineris), saavad modaalaknad alati saavutada kõrgeima `z-index`i, ilma et peaksid võitlema sügavalt pesastatud CSS-kontekstidega. See tagab, et nad ilmuvad järjepidevalt kogu muu sisu peale, olenemata sellest, milline komponent need käivitas.
• Ülevoolu Vältimine: Vanemad, millel on `overflow: hidden` või `overflow: auto`, ei kärbi enam modaalakna sisu. See on ülioluline suurte või dünaamilise sisuga modaalakende puhul.
• Ligipääsetavus (A11y): Portaalid on ligipääsetavate modaalakende loomisel fundamentaalsed. Kuigi DOM-i struktuur on eraldi, võimaldab loogiline Reacti puu ühendus korrektset fookuse haldamist (fookuse lukustamine modaalakna sisse) ja ARIA atribuutide (nagu `aria-modal`) korrektset rakendamist. Teegid nagu `react-focus-lock` või `@reach/dialog` kasutavad selleks laialdaselt portaale.

2. Dünaamilised Tööriistavihjed, Hüpikaknad ja Rippmenüüd

Sarnaselt modaalakendega peavad need elemendid sageli ilmuma käivitava elemendi kõrvale, kuid murdma välja ka piiratud vanempaigutustest.

• Täpne Positsioneerimine: Saate arvutada käivitava elemendi asukoha vaateakna suhtes ja seejärel absoluutselt positsioneerida tööriistavihje JavaScripti abil. Selle renderdamine portaali kaudu tagab, et seda ei kärbi ühegi vahepealse vanema `overflow` omadus.
• Paigutuse Nihkete Vältimine: Kui tööriistavihje renderdataks reasiseselt, võiks selle olemasolu põhjustada paigutuse nihkeid oma vanemas. Portaalid isoleerivad selle renderdamise, vältides soovimatuid ümberpaigutusi.

3. Globaalsed Teavitused ja Toast-Sõnumid

Rakendused vajavad sageli süsteemi mitte-blokeerivate, ajutiste sõnumite kuvamiseks (nt "Toode lisati ostukorvi!", "Võrguühendus katkes").

• Tsentraliseeritud Haldamine: Üks "ToastProvider" komponent saab hallata toast-sõnumite järjekorda. See pakkuja saab kasutada portaali, et renderdada kõik sõnumid spetsiaalsesse `div`-i `body` üla- või alaosas, tagades, et need on alati nähtavad ja järjepidevalt stiilitud, olenemata sellest, kus rakenduses sõnum käivitati.
• Järjepidevus: Tagab, et kõik teavitused keerulises rakenduses näevad välja ja käituvad ühtlaselt.

4. Kohandatud Kontekstimenüüd

Kui kasutaja teeb elemendil paremklõpsu, ilmub sageli kontekstimenüü. See menüü peab olema positsioneeritud täpselt kursori asukohta ja katma kogu muu sisu. Portaalid on siin ideaalsed:

• Menüükomponenti saab renderdada portaali kaudu, saades kliki koordinaadid.
• See ilmub täpselt sinna, kuhu vaja, ilma klõpsatud elemendi vanema hierarhia piiranguteta.

5. Integreerimine Kolmandate Osapoolte Teekide või Mitte-Reacti DOM-Elementidega

Kujutage ette, et teil on olemasolev rakendus, kus osa kasutajaliidesest on hallatud pärand-JavaScripti teegi poolt või ehk kohandatud kaardilahendus, mis kasutab oma DOM-sõlmi. Kui soovite renderdada väikese, interaktiivse Reacti komponendi sellises välises DOM-sõlmes, on `ReactDOM.createPortal` teie sild.

• Saate luua siht-DOM-sõlme kolmanda osapoole kontrollitud alas.
• Seejärel kasutage Reacti komponenti koos portaaliga, et süstida oma Reacti UI sellesse konkreetsesse DOM-sõlme, võimaldades Reacti deklaratiivsel jõul täiustada teie rakenduse mitte-Reacti osi.

Täiustatud Kaalutlused Reacti Portaalide Kasutamisel

Kuigi portaalid lahendavad keerulisi renderdamisprobleeme, on oluline mõista, kuidas nad suhtlevad teiste Reacti funktsioonide ja DOM-iga, et neid tõhusalt ära kasutada ja vältida levinud lõkse.

1. Sündmuste Mullitamine: Oluline Eristus

Üks võimsamaid ja sageli valesti mõistetud aspekte Reacti Portaalide juures on nende käitumine seoses sündmuste mullitamisega. Hoolimata sellest, et need renderdatakse täiesti erinevasse DOM-sõlme, mullitavad portaali sees olevatest elementidest vallandatud sündmused endiselt üles läbi Reacti komponendipuu, justkui portaali polekski. See on sellepärast, et Reacti sündmuste süsteem on sünteetiline ja töötab enamikul juhtudel sõltumatult natiivsest DOM-i sündmuste mullitamisest.

• Mida see tähendab: Kui teil on nupp portaali sees ja selle nupu kliki sündmus mullitab üles, käivitab see kõik `onClick` käsitlejad oma loogilistel vanemkomponentidel Reacti puus, mitte oma DOM-i vanemal.
• Näide: Kui teie `Modal` komponent on renderdatud `App` poolt, mullitab klõps `Modal` sees üles `App` sündmuste käsitlejateni, kui see on nii seadistatud. See on väga kasulik, kuna see säilitab intuitiivse sündmustevoo, mida Reactis ootaksite.
• Natiivsed DOM-i Sündmused: Kui lisate natiivseid DOM-i sündmuste kuulajaid otse (nt kasutades `addEventListener` `document.body` peal), järgivad need natiivset DOM-i puud. Kuid standardsete Reacti sünteetiliste sündmuste (`onClick`, `onChange` jne) puhul prevaleerib Reacti loogiline puu.

2. Context API ja Portaalid

Context API on Reacti mehhanism väärtuste (nagu teemad, kasutaja autentimise olek) jagamiseks üle komponendipuu ilma prop-drillinguta. Õnneks töötab Context portaalidega sujuvalt.

• Portaali kaudu renderdatud komponendil on endiselt juurdepääs kontekstipakkujatele, mis on tema loogilise Reacti komponendipuu esivanemad.
• See tähendab, et teil võib olla `ThemeProvider` oma `App` komponendi tipus ja portaali kaudu renderdatud modaalaken pärib endiselt selle teemakonteksti, lihtsustades globaalset stiilimist ja olekuhaldust portaali sisu jaoks.

3. Ligipääsetavus (A11y) Portaalidega

Ligipääsetavate kasutajaliideste loomine on globaalsele publikule esmatähtis ja portaalid toovad kaasa spetsiifilisi A11y kaalutlusi, eriti modaalakende ja dialoogide puhul.

• Fookuse Haldamine: Kui modaalaken avaneb, tuleks fookus lukustada modaalakna sisse, et takistada kasutajatel (eriti klaviatuuri ja ekraanilugeja kasutajatel) selle taga olevate elementidega suhtlemist. Kui modaalaken sulgub, peaks fookus naasma elemendile, mis selle käivitas. See nõuab sageli hoolikat JavaScripti haldamist (nt `useRef` kasutamist fookustatavate elementide haldamiseks või spetsiaalset teeki nagu `react-focus-lock`).
• Klaviatuuriga Navigeerimine: Veenduge, et `Esc` klahv sulgeb modaalakna ja `Tab` klahv liigub fookusega ainult modaalakna sees.
• ARIA Atribuudid: Kasutage oma portaali sisul korrektselt ARIA rolle ja omadusi, nagu `role="dialog"`, `aria-modal="true"`, `aria-labelledby` ja `aria-describedby`, et edastada selle eesmärki ja struktuuri abitehnoloogiatele.

4. Stiilimisprobleemid ja Lahendused

Kuigi portaalid lahendavad DOM-i hierarhia probleeme, ei lahenda nad maagiliselt kõiki stiilimise keerukusi.

• Globaalsed vs. Piiratud Stiilid: Kuna portaali sisu renderdatakse globaalselt ligipääsetavasse DOM-sõlme (nagu `body` või `modal-root`), võivad kõik globaalsed CSS-reeglid seda potentsiaalselt mõjutada.
• CSS-in-JS ja CSS Moodulid: Need lahendused aitavad stiile kapseldada ja vältida soovimatuid lekkeid, muutes need eriti kasulikuks portaali sisu stiilimisel. Styled Components, Emotion või CSS Moodulid võivad genereerida unikaalseid klassinimesid, tagades, et teie modaalakna stiilid ei läheks konflikti teie rakenduse teiste osadega, kuigi need on renderdatud globaalselt.
• Teemastamine: Nagu mainitud Context API puhul, veenduge, et teie teemastamislahendus (olgu see siis CSS-muutujad, CSS-in-JS teemad või kontekstipõhine teemastamine) leviks korrektselt portaali lastele.

5. Serveripoolse Renderdamise (SSR) Kaalutlused

Kui teie rakendus kasutab serveripoolset renderdamist (SSR), peate olema teadlik, kuidas portaalid käituvad.

• `ReactDOM.createPortal` nõuab oma `container` argumendiks DOM-elementi. SSR-keskkonnas toimub algne renderdamine serveris, kus brauseri DOM-i pole.
• See tähendab, et portaalid tavaliselt serveris ei renderdata. Nad "hüdreeruvad" või renderdatakse alles siis, kui JavaScript kliendi poolel käivitub.
• Sisu puhul, mis peab absoluutselt olema olemas algsel serveri renderdamisel (nt SEO või kriitilise esimese värvimise jõudluse jaoks), ei ole portaalid sobivad. Kuid interaktiivsete elementide, nagu modaalaknad, mis on tavaliselt peidetud kuni toimingu käivitamiseni, puhul on see harva probleem. Veenduge, et teie komponendid käsitleksid graatsiliselt portaali `container`-i puudumist serveris, kontrollides selle olemasolu (nt `document.getElementById('modal-root')`).

6. Portaalidega Komponentide Testimine

Portaalide kaudu renderdatavate komponentide testimine võib olla veidi erinev, kuid on hästi toetatud populaarsete testimisteekide, nagu React Testing Library, poolt.

• React Testing Library: See teek teeb vaikimisi päringuid `document.body`-st, kus teie portaali sisu tõenäoliselt asub. Seega elementide otsimine teie modaalaknast või tööriistavihjest sageli "lihtsalt töötab".
• Mockimine: Mõnes keerulises stsenaariumis või kui teie portaali loogika on tihedalt seotud konkreetsete DOM-struktuuridega, peate võib-olla oma testkeskkonnas siht-`container`-elementi mockima või hoolikalt seadistama.

Levinud Lõksud ja Parimad Tavad Reacti Portaalide Jaoks

Et tagada Reacti Portaalide kasutamise tõhusus, hooldatavus ja hea jõudlus, kaaluge neid parimaid tavasid ja vältige levinud vigu:

1. Ärge Kasutage Portaale Üleliia

Portaalid on võimsad, kuid neid tuleks kasutada kaalutletult. Kui komponendi visuaalset väljundit on võimalik saavutada ilma DOM-i hierarhiat rikkumata (nt kasutades suhtelist või absoluutset positsioneerimist mitte-ülevoolavas vanemas), siis tehke seda. Liigne tuginemine portaalidele võib mõnikord DOM-struktuuri silumist keerulisemaks muuta, kui seda hoolikalt ei hallata.

2. Tagage Korralik Koristus (Eemaldamine)

Kui loote dünaamiliselt oma portaalile DOM-sõlme (nagu meie `Modal` näites `el.current`-ga), veenduge, et koristate selle ära, kui portaali kasutav komponent eemaldatakse. `useEffect` cleanup-funktsioon on selleks ideaalne, vältides mälulekkeid ja DOM-i risustamist orvuks jäänud elementidega.

useEffect(() => {
  // ... lisa el.current
  return () => {
    // ... eemalda el.current;
  };
}, []);

Kui renderdate alati fikseeritud, eelnevalt olemasolevasse DOM-sõlme (nagu üks `modal-root`), pole *sõlme enda* koristamine vajalik, kuid React hoolitseb automaatselt selle eest, et *portaali sisu* eemaldataks korrektselt, kui vanemkomponent eemaldatakse.

3. Jõudluse Kaalutlused

Enamiku kasutusjuhtude (modaalaknad, tööriistavihjed) puhul on portaalidel tühine jõudlusmõju. Kui aga renderdate portaali kaudu eriti suurt või sageli uuendatavat komponenti, kaaluge tavalisi Reacti jõudluse optimeerimisi (nt `React.memo`, `useCallback`, `useMemo`), nagu teeksite iga teise keerulise komponendi puhul.

4. Seadke Alati Esikohale Ligipääsetavus

Nagu rõhutatud, on ligipääsetavus kriitilise tähtsusega. Veenduge, et teie portaalis renderdatud sisu järgiks ARIA juhiseid ja pakuks sujuvat kogemust kõigile kasutajatele, eriti neile, kes toetuvad klaviatuuriga navigeerimisele või ekraanilugejatele.

• Modaalakna fookuse lukustamine: Rakendage või kasutage teeki, mis lukustab klaviatuuri fookuse avatud modaalakna sisse.
• Kirjeldavad ARIA atribuudid: Kasutage `aria-labelledby`, `aria-describedby`, et siduda modaalakna sisu selle pealkirja ja kirjeldusega.
• Klaviatuuriga sulgemine: Lubage sulgemine `Esc` klahviga.
• Fookuse taastamine: Kui modaalaken sulgub, tagastage fookus elemendile, mis selle avas.

5. Kasutage Portaalides Semantilist HTML-i

Kuigi portaal võimaldab teil sisu visuaalselt ükskõik kuhu renderdada, pidage meeles kasutada oma portaali laste seas semantilisi HTML-elemente. Näiteks peaks dialoog kasutama `

// Näide lihtsast PortalWrapperist
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const createWrapperAndAppendToBody = (wrapperId) => {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
};

const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
  const [wrapperElement, setWrapperElement] = useState(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId);
    let systemCreated = false;
    // kui wrapperId-ga elementi ei eksisteeri, loo see ja lisa body-le
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Kustuta programmiliselt loodud element
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

  return ReactDOM.createPortal(children, wrapperElement);
};

export default PortalWrapper;