A React Portálok Mesterfogásai: Komponensek Megjelenítése a DOM Hierarchián Túl

A modern webfejlesztés hatalmas területén a React világszerte számtalan fejlesztőt tett képessé dinamikus és rendkívül interaktív felhasználói felületek építésére. Komponensalapú architektúrája leegyszerűsíti a komplex UI struktúrákat, elősegítve az újrafelhasználhatóságot és a karbantarthatóságot. Azonban a React elegáns tervezése ellenére a fejlesztők időnként olyan helyzetekkel találkoznak, ahol a standard komponens renderelési megközelítés – ahol a komponensek a kimenetüket a szülő DOM elemükön belüli gyermekként jelenítik meg – jelentős korlátokat támaszt.

Gondoljunk egy modális párbeszédablakra, amelynek minden más tartalom felett kell megjelennie, egy globálisan lebegő értesítési sávra, vagy egy helyi menüre, amelynek ki kell törnie egy túlcsorduló szülő konténer határai közül. Ilyen helyzetekben a komponensek közvetlenül a szülő DOM hierarchiájába történő renderelésének hagyományos megközelítése kihívásokhoz vezethet a stílusozás (mint például a z-index konfliktusok), az elrendezési problémák és az eseményterjedés bonyolultsága terén. Pontosan itt lépnek színre a React Portálok, mint a React fejlesztők arzenáljának erőteljes és nélkülözhetetlen eszközei.

Ez az átfogó útmutató mélyen beleássa magát a React Portál mintába, feltárva annak alapvető fogalmait, gyakorlati alkalmazásait, haladóbb megfontolásait és legjobb gyakorlatait. Legyen Ön tapasztalt React fejlesztő vagy csak most kezdje útját, a portálok megértése új lehetőségeket nyit meg az igazán robusztus és globálisan hozzáférhető felhasználói élmények építésében.

Az Alapvető Kihívás Megértése: A DOM Hierarchia Korlátai

A React komponensek alapértelmezés szerint a kimenetüket a szülő komponensük DOM csomópontjába renderelik. Ez közvetlen leképezést hoz létre a React komponensfa és a böngésző DOM fája között. Bár ez a kapcsolat intuitív és általában előnyös, akadállyá válhat, amikor egy komponens vizuális megjelenítésének ki kell szakadnia a szülő korlátai közül.

Gyakori Helyzetek és Problémáik:

• Modális ablakok, párbeszédpanelek és lightboxok: Ezeknek az elemeknek általában az egész alkalmazást le kell fedniük, függetlenül attól, hogy hol vannak definiálva a komponensfában. Ha egy modális ablak mélyen be van ágyazva, annak CSS `z-index`-ét korlátozhatják az ősei, ami megnehezíti annak biztosítását, hogy mindig felül jelenjen meg. Továbbá, egy szülő elemen lévő `overflow: hidden` levághatja a modális ablak részeit.
• Tooltip-ek és Popover-ek: A modális ablakokhoz hasonlóan a tooltip-eknek vagy popover-eknek gyakran egy elemhez képest kell pozícionálniuk magukat, de a potenciálisan korlátozott szülő határokon kívül kell megjelenniük. Egy szülőn lévő `overflow: hidden` levághat egy tooltip-et.
• Értesítések és Toast Üzenetek: Ezek a globális üzenetek gyakran a nézetablak tetején vagy alján jelennek meg, ami megköveteli, hogy függetlenül renderelődjenek az őket kiváltó komponenstől.
• Helyi Menük: A jobb kattintásra megjelenő menüknek vagy egyedi helyi menüknek pontosan ott kell megjelenniük, ahol a felhasználó kattint, gyakran kitörve a szűk szülő konténerekből a teljes láthatóság biztosítása érdekében.
• Harmadik Fél Integrációi: Néha előfordulhat, hogy egy React komponenst egy olyan DOM csomópontba kell renderelni, amelyet egy külső könyvtár vagy régi kód kezel, a React gyökérelemen kívül.

Mindezekben a forgatókönyvekben a kívánt vizuális eredmény elérése csupán a standard React rendereléssel gyakran bonyolult CSS-hez, túlzott `z-index` értékekhez vagy nehezen karbantartható és skálázható pozícionálási logikához vezet. Itt kínálnak a React Portálok egy tiszta, idiomatikus megoldást.

Mi is Pontosan a React Portál?

A React Portál első osztályú módot biztosít a gyermek elemek olyan DOM csomópontba történő renderelésére, amely a szülő komponens DOM hierarchiáján kívül létezik. Annak ellenére, hogy egy másik fizikai DOM elembe renderelődik, a portál tartalma továbbra is úgy viselkedik, mintha a React komponensfában közvetlen gyermek lenne. Ez azt jelenti, hogy megőrzi ugyanazt a React kontextust (pl. Context API értékeket) és részt vesz a React eseménybuborékolási rendszerében.

A React Portálok magja a `ReactDOM.createPortal()` metódusban rejlik. Aláírása egyszerű:

ReactDOM.createPortal(child, container)

• child: Bármilyen renderelhető React gyermek, mint például egy elem, string vagy fragmentum.
• container: Egy már létező DOM elem a dokumentumban. Ez a cél DOM csomópont, ahová a `child` renderelve lesz.

Amikor a `ReactDOM.createPortal()`-t használja, a React egy új virtuális DOM al-fát hoz létre a megadott `container` DOM csomópont alatt. Azonban ez az új al-fa logikailag továbbra is kapcsolódik a portált létrehozó komponenshez. Ez a "logikai kapcsolat" a kulcsa annak megértéséhez, hogy miért működik az eseménybuborékolás és a kontextus a várt módon.

Az Első React Portál Létrehozása: Egy Egyszerű Modális Ablak Példa

Nézzünk végig egy gyakori felhasználási esetet: egy modális párbeszédablak létrehozását. Egy portál implementálásához először szüksége van egy cél DOM elemre az `index.html` fájlban (vagy bárhol is legyen az alkalmazás gyökér HTML fájlja), ahová a portál tartalma renderelve lesz.

1. Lépés: A Cél DOM Csomópont Előkészítése

Nyissa meg a `public/index.html` fájlt (vagy azzal egyenértékűt), és adjon hozzá egy új `div` elemet. Gyakori gyakorlat ezt közvetlenül a záró `body` címke elé helyezni, a fő React alkalmazás gyökérelemen kívül.

<body>
  <!-- A fő React alkalmazás gyökere -->
  <div id="root"></div>

  <!-- Ide fog renderelődni a portál tartalmunk -->
  <div id="modal-root"></div>
</body>

2. Lépés: A Portál Komponens Létrehozása

Most hozzunk létre egy egyszerű modális komponenst, amely portált használ.

// 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(() => {
    // A div hozzáadása a modális gyökérhez, amikor a komponens beillesztődik
    modalRoot.appendChild(el.current);

    // Tisztítás: a div eltávolítása, amikor a komponens eltávolításra kerül
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // Az üres függőségi tömb azt jelenti, hogy ez egyszer fut le beillesztéskor és egyszer eltávolításkor

  if (!isOpen) {
    return null; // Ne rendereljen semmit, ha a modális ablak nincs nyitva
  }

  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 // Biztosítsa, hogy felül legyen
    }}>
      <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' }}>Modális bezárása</button>
      </div>
    </div>,
    el.current // A modális tartalom renderelése a létrehozott div-ünkbe, amely a modalRoot-on belül van
  );
};

export default Modal;

Ebben a példában minden modális példányhoz létrehozunk egy új `div` elemet (`el.current`), és hozzáfűzzük a `modal-root`-hoz. Ez lehetővé teszi számunkra, hogy több modális ablakot kezeljünk, ha szükséges, anélkül, hogy azok zavarnák egymás életciklusát vagy tartalmát. A tényleges modális tartalom (az átfedés és a fehér doboz) ezután az `el.current`-be renderelődik a `ReactDOM.createPortal` segítségével.

3. Lépés: A Modális Komponens Használata

// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Feltételezve, hogy a Modal.js ugyanabban a könyvtárban van

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

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

  return (
    <div style={{ padding: '20px' }}>
      <h1>React Portál Példa</h1>
      <p>Ez a tartalom a fő alkalmazásfa része.</p>
      <button onClick={handleOpenModal}>Globális Modális Megnyitása</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>Üdvözlet a Portálból!</h3>
        <p>Ez a modális tartalom a 'root' div-en kívül renderelődik, de továbbra is a React kezeli.</p>
      </Modal>
    </div>
  );
}

export default App;

Annak ellenére, hogy a `Modal` komponens az `App` komponensen belül renderelődik (ami maga a `root` div-en belül van), a tényleges DOM kimenete a `modal-root` div-en belül jelenik meg. Ez biztosítja, hogy a modális ablak minden mást lefedjen `z-index` vagy `overflow` problémák nélkül, miközben továbbra is élvezi a React állapotkezelésének és komponens életciklusának előnyeit.

A React Portálok Főbb Felhasználási Esetei és Haladó Alkalmazásai

Bár a modális ablakok a legjellegzetesebb példák, a React Portálok hasznossága messze túlmutat az egyszerű felugró ablakokon. Nézzünk meg néhány haladóbb forgatókönyvet, ahol a portálok elegáns megoldásokat nyújtanak.

1. Robusztus Modális Ablak- és Párbeszédpanel-rendszerek

Ahogy láttuk, a portálok leegyszerűsítik a modális ablakok implementálását. A legfőbb előnyök a következők:

• Garantált Z-Index: A `body` szinten (vagy egy dedikált, magas szintű konténerben) történő rendereléssel a modális ablakok mindig a legmagasabb `z-index`-et érhetik el anélkül, hogy mélyen beágyazott CSS kontextusokkal kellene harcolniuk. Ez biztosítja, hogy következetesen minden más tartalom felett jelenjenek meg, függetlenül az őket kiváltó komponenstől.
• Túlcsordulás Elkerülése: Az `overflow: hidden` vagy `overflow: auto` tulajdonságú szülők többé nem vágják le a modális tartalmát. Ez kulcsfontosságú a nagy méretű vagy dinamikus tartalmú modális ablakok esetében.
• Akadálymentesítés (A11y): A portálok alapvetőek az akadálymentes modális ablakok építéséhez. Bár a DOM struktúra különálló, a logikai React fa kapcsolat lehetővé teszi a megfelelő fókuszkezelést (a fókusz csapdába ejtését a modális ablakon belül) és az ARIA attribútumok (mint például az `aria-modal`) helyes alkalmazását. Az olyan könyvtárak, mint a `react-focus-lock` vagy a `@reach/dialog` széles körben kihasználják a portálokat erre a célra.

2. Dinamikus Tooltip-ek, Popover-ek és Legördülő Menük

A modális ablakokhoz hasonlóan ezek az elemek gyakran egy kiváltó elem mellett kell, hogy megjelenjenek, de ki kell törniük a szűk szülő elrendezésekből.

• Pontos Pozícionálás: Kiszámíthatja a kiváltó elem pozícióját a nézetablakhoz képest, majd abszolút pozícionálhatja a tooltip-et JavaScript segítségével. Portálon keresztüli renderelése biztosítja, hogy azt ne vágja le egy `overflow` tulajdonság semmilyen köztes szülőn.
• Elrendezés-eltolódások Elkerülése: Ha egy tooltip inline renderelődne, jelenléte elrendezés-eltolódásokat okozhatna a szülőjében. A portálok elkülönítik a renderelését, megakadályozva a nem kívánt újrarajzolásokat (reflow).

3. Globális Értesítések és Toast Üzenetek

Az alkalmazások gyakran igényelnek egy rendszert a nem blokkoló, ideiglenes üzenetek megjelenítésére (pl. "Termék a kosárba helyezve!", "Hálózati kapcsolat megszakadt").

• Központosított Kezelés: Egyetlen "ToastProvider" komponens kezelheti a toast üzenetek sorát. Ez a provider portált használhat az összes üzenet renderelésére egy dedikált `div`-be a `body` tetején vagy alján, biztosítva, hogy mindig láthatóak és következetesen stílusozottak legyenek, függetlenül attól, hogy az alkalmazás mely részén váltódott ki az üzenet.
• Következetesség: Biztosítja, hogy egy komplex alkalmazásban minden értesítés egységesen nézzen ki és viselkedjen.

4. Egyedi Helyi Menük

Amikor egy felhasználó jobb gombbal kattint egy elemre, gyakran megjelenik egy helyi menü. Ezt a menüt pontosan a kurzor helyére kell pozícionálni, és le kell fednie minden más tartalmat. A portálok ideálisak itt:

• A menü komponens portálon keresztül renderelhető, megkapva a kattintás koordinátáit.
• Pontosan ott fog megjelenni, ahol szükséges, a kattintott elem szülő hierarchiájától függetlenül.

5. Integráció Harmadik Fél Könyvtáraival vagy Nem-React DOM Elemekkel

Képzelje el, hogy van egy meglévő alkalmazása, ahol a UI egy részét egy régi JavaScript könyvtár, vagy talán egy egyedi térképészeti megoldás kezeli, amely saját DOM csomópontokat használ. Ha egy kis, interaktív React komponenst szeretne renderelni egy ilyen külső DOM csomóponton belül, a `ReactDOM.createPortal` a híd.

• Létrehozhat egy cél DOM csomópontot a harmadik fél által vezérelt területen.
• Ezután egy portállal rendelkező React komponenst használhat a React UI beillesztésére abba a specifikus DOM csomópontba, lehetővé téve, hogy a React deklaratív ereje javítsa az alkalmazás nem-React részeit.

Haladó Megfontolások a React Portálok Használatakor

Bár a portálok megoldják a komplex renderelési problémákat, kulcsfontosságú megérteni, hogyan lépnek kölcsönhatásba más React funkciókkal és a DOM-mal, hogy hatékonyan kiaknázzuk őket és elkerüljük a gyakori buktatókat.

1. Eseménybuborékolás: Egy Döntő Különbség

A React Portálok egyik legerősebb és gyakran félreértett aspektusa az eseménybuborékolással kapcsolatos viselkedésük. Annak ellenére, hogy egy teljesen más DOM csomópontba renderelődnek, a portálon belüli elemekből indított események továbbra is felfelé terjednek a React komponensfán, mintha nem is létezne portál. Ez azért van, mert a React eseményrendszere szintetikus, és a legtöbb esetben függetlenül működik a natív DOM eseménybuborékolástól.

• Mit jelent ez: Ha van egy gombja egy portálon belül, és a gomb kattintási eseménye felfelé terjed, az kiváltja a logikai szülő komponensein lévő `onClick` kezelőket a React fában, nem pedig a DOM szülőjén.
• Példa: Ha a `Modal` komponenst az `App` rendereli, egy kattintás a `Modal`-on belül felfelé terjed az `App` eseménykezelőihez, ha azok be vannak állítva. Ez rendkívül előnyös, mivel megőrzi a React-ben elvárt intuitív eseményfolyamot.
• Natív DOM Események: Ha közvetlenül csatol natív DOM eseményfigyelőket (pl. `addEventListener` használatával a `document.body`-n), azok a natív DOM fát fogják követni. Azonban a standard React szintetikus események (`onClick`, `onChange`, stb.) esetében a React logikai fája az irányadó.

2. Context API és a Portálok

A Context API a React mechanizmusa az értékek (mint témák, felhasználói hitelesítési állapot) megosztására a komponensfán anélkül, hogy prop-okon keresztül kellene őket továbbítani (prop-drilling). Szerencsére a Context zökkenőmentesen működik a portálokkal.

• Egy portálon keresztül renderelt komponens továbbra is hozzáfér azokhoz a kontextus szolgáltatókhoz (provider), amelyek a logikai React komponensfájában az ősei.
• Ez azt jelenti, hogy lehet egy `ThemeProvider` az `App` komponens tetején, és egy portálon keresztül renderelt modális ablak továbbra is örökölni fogja ezt a téma kontextust, leegyszerűsítve a globális stílusozást és állapotkezelést a portál tartalmára vonatkozóan.

3. Akadálymentesítés (A11y) Portálokkal

Az akadálymentes UI-k építése elengedhetetlen a globális közönség számára, és a portálok specifikus A11y megfontolásokat vetnek fel, különösen a modális ablakok és párbeszédpanelek esetében.

• Fókuszkezelés: Amikor egy modális ablak megnyílik, a fókuszt csapdába kell ejteni a modális ablakon belül, hogy megakadályozzuk a felhasználókat (különösen a billentyűzetet és képernyőolvasót használókat) abban, hogy a mögötte lévő elemekkel interakcióba lépjenek. Amikor a modális ablak bezárul, a fókusznak vissza kell térnie az azt kiváltó elemre. Ez gyakran gondos JavaScript kezelést igényel (pl. `useRef` használata a fókuszálható elemek kezelésére, vagy egy dedikált könyvtár, mint a `react-focus-lock`).
• Billentyűzet Navigáció: Biztosítsa, hogy az `Esc` billentyű bezárja a modális ablakot, és a `Tab` billentyű csak a modális ablakon belül léptesse a fókuszt.
• ARIA Attribútumok: Használjon helyesen ARIA szerepeket és tulajdonságokat, mint például `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, és `aria-describedby` a portál tartalmán, hogy közvetítse annak célját és szerkezetét a segítő technológiák felé.

4. Stílusozási Kihívások és Megoldások

Bár a portálok megoldják a DOM hierarchia problémáit, nem oldják meg varázsütésre az összes stílusozási bonyodalmat.

• Globális vs. Hatókörön Belüli Stílusok: Mivel a portál tartalma egy globálisan elérhető DOM csomópontba renderelődik (mint a `body` vagy `modal-root`), bármilyen globális CSS szabály potenciálisan befolyásolhatja azt.
• CSS-in-JS és CSS Modulok: Ezek a megoldások segíthetnek a stílusok beágyazásában és a nem kívánt szivárgások megelőzésében, ami különösen hasznossá teszi őket a portál tartalmának stílusozásakor. A Styled Components, az Emotion vagy a CSS Modulok egyedi osztályneveket generálhatnak, biztosítva, hogy a modális ablak stílusai ne ütközzenek az alkalmazás más részeivel, annak ellenére, hogy globálisan renderelődnek.
• Témázás: Ahogy a Context API-val kapcsolatban említettük, biztosítsa, hogy a témázási megoldása (legyen az CSS változók, CSS-in-JS témák vagy kontextus alapú témázás) helyesen terjedjen tovább a portál gyermekeire.

5. Szerveroldali Megjelenítés (SSR) Megfontolások

Ha az alkalmazása Szerveroldali Megjelenítést (SSR) használ, figyelnie kell arra, hogyan viselkednek a portálok.

• A `ReactDOM.createPortal` egy DOM elemet igényel `container` argumentumként. SSR környezetben a kezdeti renderelés a szerveren történik, ahol nincs böngésző DOM.
• Ez azt jelenti, hogy a portálok általában nem renderelődnek a szerveren. Csak akkor "hidratálódnak" vagy renderelődnek, amikor a JavaScript végrehajtódik az ügyféloldalon.
• Olyan tartalom esetében, amelynek feltétlenül jelen kell lennie a kezdeti szerveroldali renderelésnél (pl. SEO vagy kritikus első festési teljesítmény miatt), a portálok nem alkalmasak. Azonban az interaktív elemek, mint a modális ablakok, amelyek általában rejtve vannak, amíg egy művelet ki nem váltja őket, ez ritkán jelent problémát. Biztosítsa, hogy a komponensei kecsesen kezeljék a portál `container`-ének hiányát a szerveren azáltal, hogy ellenőrzik annak létezését (pl. `document.getElementById('modal-root')`).

6. Portálokat Használó Komponensek Tesztelése

A portálokon keresztül renderelt komponensek tesztelése kissé eltérő lehet, de a népszerű tesztelési könyvtárak, mint a React Testing Library, jól támogatják.

• React Testing Library: Ez a könyvtár alapértelmezés szerint a `document.body`-t kérdezi le, ahol a portál tartalma valószínűleg található. Így a modális ablakon vagy tooltip-en belüli elemek lekérdezése gyakran "csak úgy működni fog".
• Mockolás: Néhány összetett esetben, vagy ha a portál logikája szorosan kapcsolódik specifikus DOM struktúrákhoz, szükség lehet a cél `container` elem mockolására vagy gondos beállítására a tesztkörnyezetben.

Gyakori Buktatók és Legjobb Gyakorlatok a React Portálokhoz

Annak érdekében, hogy a React Portálok használata hatékony, karbantartható és jól teljesítő legyen, vegye figyelembe ezeket a legjobb gyakorlatokat és kerülje el a gyakori hibákat:

1. Ne Használja Túl a Portálokat

A portálok erőteljesek, de megfontoltan kell őket használni. Ha egy komponens vizuális kimenete elérhető a DOM hierarchia megszakítása nélkül (pl. relatív vagy abszolút pozícionálással egy nem túlcsorduló szülőn belül), akkor tegye azt. A portálokra való túlzott támaszkodás néha bonyolíthatja a DOM struktúra hibakeresését, ha nem kezelik gondosan.

2. Biztosítsa a Megfelelő Tisztítást (Eltávolítás)

Ha dinamikusan hoz létre egy DOM csomópontot a portáljához (mint a `Modal` példánkban az `el.current`-tel), biztosítsa, hogy azt eltakarítja, amikor a portált használó komponens eltávolításra kerül. A `useEffect` tisztító funkciója tökéletes erre, megelőzve a memóriaszivárgást és a DOM elárvult elemekkel való teleszemetelését.

useEffect(() => {
  // ... el.current hozzáfűzése
  return () => {
    // ... el.current eltávolítása;
  };
}, []);

Ha mindig egy fix, előre létező DOM csomópontba renderel (mint egyetlen `modal-root`), akkor magának a *csomópontnak* a tisztítása nem szükséges, de a React automatikusan gondoskodik arról, hogy a *portál tartalma* helyesen eltávolításra kerüljön, amikor a szülő komponens eltávolításra kerül.

3. Teljesítmény-megfontolások

A legtöbb felhasználási eset (modális ablakok, tooltip-ek) esetében a portáloknak elhanyagolható teljesítményhatása van. Azonban, ha egy rendkívül nagy vagy gyakran frissülő komponenst renderel egy portálon keresztül, vegye figyelembe a szokásos React teljesítményoptimalizálásokat (pl. `React.memo`, `useCallback`, `useMemo`), mint bármely más komplex komponens esetében.

4. Mindig Priorizálja az Akadálymentesítést

Ahogy kiemeltük, az akadálymentesítés kritikus. Biztosítsa, hogy a portálon keresztül renderelt tartalom kövesse az ARIA irányelveket és zökkenőmentes élményt nyújtson minden felhasználó számára, különösen azoknak, akik billentyűzet-navigációra vagy képernyőolvasókra támaszkodnak.

• Modális ablak fókusz csapdába ejtése: Implementáljon vagy használjon egy könyvtárat, amely a billentyűzet fókuszát a nyitott modális ablakon belül tartja.
• Leíró ARIA attribútumok: Használja az `aria-labelledby`, `aria-describedby` attribútumokat a modális tartalom címéhez és leírásához való kapcsolására.
• Billentyűs bezárás: Engedélyezze a bezárást az `Esc` billentyűvel.
• Fókusz visszaállítása: Amikor a modális ablak bezárul, állítsa vissza a fókuszt az azt megnyitó elemre.

5. Használjon Szemantikus HTML-t a Portálokon Belül

Bár a portál lehetővé teszi a tartalom vizuálisan bárhová történő renderelését, ne felejtse el szemantikus HTML elemeket használni a portál gyermekein belül. Például egy párbeszédpanelnek `

// Egy egyszerű PortalWrapper példája
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;
    // ha nem létezik elem a wrapperId-val, hozzon létre egyet és fűzze a body-hoz
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // A programozottan létrehozott elem törlése
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

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

export default PortalWrapper;