ReactJS - Portale: Ein Tor zu neuen Dimensionen in Ihren React-Anwendungen

Hallo, ambitionierte React-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der React Portale. Stellen Sie sich vor, Sie bauen ein Haus (Ihre React-Anwendung), und plötzlich realizeiren Sie, dass Sie einen geheimen Gang benötigen, um etwas von einem Raum in einen anderen zu transportieren, ohne durch den Hauptflur zu gehen. Genau das machen React Portale für Ihre Komponenten!

Was sind React Portale?

React Portale bieten eine erste Klasse Methode, um Kinder in einen DOM-Knoten zu rendern, der außerhalb der DOM-Hierarchie der übergeordneten Komponente existsiert. In einfacheren Worten, es ist wie das Erstellen eines Wurmlochs, das es Ihnen ermöglicht, eine Komponente an einer anderen Stelle im DOM-Baum zu rendern, obwohl sie immer noch Teil Ihrer React-Komponentenhierarchie ist.

Warum brauchen wir Portale?

Vielleicht fragen Sie sich, "Warum kann ich meine Komponente nicht einfach überall rendern?" Well, in den meisten Fällen können Sie das! Aber es gibt Szenarien, in denen Portale praktisch sind:

1. ModalDialoge
2. Tooltips
3. Schwebende Menüs
4. Widgets, die aus ihrem Container ausbrechen müssen

Lassen Sie uns tiefer einsteigen, wie Portale funktionieren und wie man sie verwendet.

Erstellen Ihres ersten Portals

Um ein Portal zu erstellen, verwenden wir die Methode ReactDOM.createPortal(). Hier ist ein einfaches Beispiel:

import React from 'react';
import ReactDOM from 'react-dom';

function MyPortalComponent() {
return ReactDOM.createPortal(
<h1$Ich werde an einem anderen Ort gerendert!</h1>,
document.getElementById('portal-root')
);
}

In diesem Beispiel erstellen wir ein Portal, das ein <h1>-Element in einen DOM-Knoten mit der ID 'portal-root' rendert. Dieser Knoten sollte irgendwo in Ihrem HTML existieren, außerhalb des Hauptelements Ihrer React-App.

Lassen Sie uns die ReactDOM.createPortal()-Methode analysieren:

1. Das erste Argument ist das React-Element, das Sie rendern möchten.
2. Das zweite Argument ist der DOM-Knoten, an dem Sie es rendern möchten.

Ein realweltliches Beispiel: ModalDialog

Lassen Sie uns ein praktischeres Beispiel erstellen - einen ModalDialog, der über dem Inhalt Ihrer Anwendung appears.

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ isOpen, onClose, children }) {
if (!isOpen) return null;

return ReactDOM.createPortal(
<div className="modal-overlay">
<div className="modal-content">
{children}
<button onClick={onClose}>Schließen</button>
</div>
</div>,
document.getElementById('modal-root')
);
}

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

return (
<div>
<h1>Willkommen in meiner App</h1>
<button onClick={() => setIsModalOpen(true)}>Modal öffnen</button>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
<h2>Dies ist ein Modal</h2>
<p>Es wird außerhalb des Haupt-React-Baums gerendert!</p>
</Modal>
</div>
);
}

In diesem Beispiel haben wir eine wiederverwendbare Modal-Komponente erstellt, die ein Portal verwendet, um ihren Inhalt zu rendern. Die App-Komponente steuert die Sichtbarkeit des Modals mit dem React-Hook useState.

Lassen Sie uns analysieren, was passiert:

1. Die Modal-Komponente überprüft, ob sie geöffnet sein sollte (isOpen-Prop).
2. Wenn geöffnet, erstellt sie ein Portal, das ihren Inhalt in das Element mit der ID 'modal-root' rendert.
3. Der Modal-Inhalt enthält einen Schließknopf, der die onClose-Prop auslöst.
4. In der App-Komponente verwenden wir den Zustand, um die Sichtbarkeit des Modals zu steuern.

Ereignisbubblung durch Portale

Ein faszinierendes Aspekt der Portale ist, dass sie zwar Inhalte überall im DOM-Baum rendern können, aber Ereignisse wie erwartet durch den React-Baum aufsteigen. Sehen wir uns ein Beispiel an:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function Parent() {
const [clicks, setClicks] = useState(0);

const handleClick = () => {
setClicks(clicks + 1);
};

return (
<div onClick={handleClick}>
<h1>Clicks: {clicks}</h1>
<Portal>
<Child />
</Portal>
</div>
);
}

function Portal({ children }) {
return ReactDOM.createPortal(
children,
document.getElementById('portal-root')
);
}

function Child() {
return <button>Click mich!</button>;
}

In diesem Beispiel wird das Klicken auf die Schaltfläche im Portal immer noch den Klickhandler in der übergeordneten Komponente auslösen und den Klickzähler erhöhen. Dieses Verhalten ist äußerst nützlich, da es die erwartete Ereignispropagation aufrechterhält, unabhängig davon, wo die Komponente tatsächlich im DOM gerendert wird.

Best Practices und Überlegungen

Beim Verwenden von Portalen sollten Sie folgende Punkte beachten:

1. Zugänglichkeit: Stellen Sie sicher, dass Ihr Portal-Inhalt zugänglich ist, insbesondere für Screenreader.
2. Ereignisverarbeitung: Denken Sie daran, dass Ereignisse durch den React-Baum, nicht durch den DOM-Baum, aufsteigen.
3. Styling: Portal-Inhalte können separate Styling-Überlegungen erfordern.
4. Aufräumen: Vergessen Sie nicht, Ihre Portale zu bereinigen, wenn die Komponente卸载.

Portalmethoden

Hier ist eine Tabelle der wichtigsten Methoden in Bezug auf React Portale:

Methode	Beschreibung
ReactDOM.createPortal(child, container)	Erstellt ein Portal. child ist jedes renderbare React-Kind und container ist ein DOM-Element.
ReactDOM.unmountComponentAtNode(container)	Entfernt eine montierte React-Komponente aus dem DOM und bereinigt ihre Ereignisandler und ihren Zustand.

Schlussfolgerung

React Portale sind eine leistungsstarke Funktion, die es Ihnen ermöglicht, die traditionelle Komponentenhierarchie beim Rendern zu durchbrechen. Sie sind besonders nützlich für die Erstellung von Modals, Tooltips und anderen UI-Elementen, die visuell aus ihren Containern ausbrechen müssen.

Denken Sie daran, mit großer Macht kommt große Verantwortung! Verwenden Sie Portale mit Bedacht und beachten Sie immer die Auswirkungen auf die Struktur und Zugänglichkeit Ihrer Anwendung.

Viel Spaß beim Coden und möge Ihre Portale immer zu aufregenden neuen Dimensionen in Ihren React-Anwendungen führen!

Credits: Image by storyset