Portal Wrapper
React Portal Wrapper sind speziell gestaltete Komponenten, die als umschließende Hülle für Portals dienen. Sie ermöglichen eine bessere Strukturierung und Wiederverwendbarkeit von UI-Elementen, die außerhalb der regulären DOM-Hierarchie gerendert werden. Durch die Kapselung von Portals in Custom Components lassen sich komplexe Layouts und Interaktionen sauber und modular gestalten.
Inhaltsverzeichnis
Es besteht die Möglichkeit, ähnlich wie es mit Provider Wrappern der Fall ist, auch eigene Portal Wrapper zu erstellen. Dabei handelt es sich um eine Art Custom-Component, welcher als Rückgabewert den Rückgabewert der createPortal() Funktion hat. Dazwischen kann man bei Bedarf bestimmte Logik platzieren.
Sinnvoll ist diese Verwendung, wenn man bestimmte Prüfungen vornehmen oder sonstige Funktionen ausführen möchte.
Um dieses Thema anschaulicher aufzuzeigen, werden wir ein Beispiel aufbauen, anhand welchem wir sehen, wie ein eigener Portal Wrapper aufgebaut werden kann.
Bevor wir allerdings das Beispiel selbst implementieren, benötigen wir einen Einhängepunkt für unser Portal. Hierbei handelt es sich um ein DOM-Element.
Für dieses Beispiel platziere ich dieses Element innerhalb der index.html des Projekts und gebe diesem Element die ID portal-destination.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
</head>
<body>
<div id="root"></div>
<div id="portal-destination"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>Ok, nun haben wir das Element in unserem DOM und können darauf eine Referenz erhalten. Das tun wir in unserer Wrapper-Component-Funktion SimplePortal.
import { createPortal } from 'react-dom';
function SimplePortal({ children }) {
// Referenz auf Ziel-Element
const portalRoot = document.getElementById('portal-destination');
if (!portalRoot) return;
// Portal erstellen und Kinder einbinden
return createPortal(children, portalRoot);
}
function PortalWrapper() {
return (
<div className="app-component">
<h1>Haupt Component</h1>
<div className="content">
<p>Inhalt des Haupt Components.</p>
<SimplePortal>
<div className="portal-component">
<h2>Portal Component</h2>
<p>Inhalt des Portal Components.</p>
</div>
</SimplePortal>
</div>
</div>
);
}
export default PortalWrapper;Das gerenderte Ergebnis zeigt uns, dass alle Elemente, die wir als Kinder von SimplePortal platziert haben, innerhalb des DIV-Containers mit der ID portal-destination ausgegeben wurden.
