React-Komponenten fördern bewährte Praktiken, können jedoch zu restriktiv sein. Erfahren Sie, wie Sie neue Maßstäbe setzen.

Die zentralen Thesen

  • Mit React Portals können Sie den Inhalt einer Komponente außerhalb der Hierarchie der übergeordneten Komponente rendern, was ihn für UI-Elemente wie Modals und Overlays nützlich macht.
  • Portale können in verschiedenen Szenarien wie Modalitäten, Integrationen von Drittanbietern, Kontextmenüs und Tooltips verwendet werden und ermöglichen so ein flexibles Rendering an verschiedenen DOM-Standorten.
  • Durch die Verwendung von React Portals können Sie UI-Belange vom Hauptkomponentenbaum trennen, die Wartbarkeit des Codes verbessern und den Z-Index von Komponenten zum Überlagern und Stapeln von UI-Elementen einfach steuern.

Moderne Webanwendungen benötigen Schnittstellen, die Elemente wie Modalitäten und Tooltips enthalten. Diese UI-Komponenten lassen sich jedoch möglicherweise nicht immer gut in die vorhandene Komponentenstruktur integrieren.

React bietet eine Lösung für dieses Problem durch eine Funktion namens Portale.

instagram viewer

Was sind Reaktionsportale?

React Portals bieten eine Möglichkeit, den Inhalt einer Komponente außerhalb der Hierarchie ihrer übergeordneten Komponente darzustellen. Mit anderen Worten: Sie ermöglichen es Ihnen, die Ausgabe einer Komponente in ein anderes DOM-Element zu rendern, das kein untergeordnetes Element der aktuellen Komponente ist.

Diese Funktion ist praktisch, wenn Sie mit UI-Komponenten arbeiten, die auf einer höheren Ebene im DOM gerendert werden müssen, wie z. B. Modalitäten oder Overlays.

Verwendet für Reaktionsportale

React-Portale sind in verschiedenen Szenarien nützlich:

  • Modale und Overlays. Wenn Sie modale Dialoge oder Überlagerungen anzeigen müssen, rendern Sie diese auf der obersten Ebene des DOM. Dadurch wird sichergestellt, dass die Stile oder das Layout ihrer übergeordneten Elemente sie nicht einschränken.
  • Integrationen von Drittanbietern. Bei der Integration von Bibliotheken von Drittanbietern, die das Rendern an bestimmten DOM-Standorten erwarten.
  • Kontextmenüs. Erstellen Sie Kontextmenüs, die auf Benutzerinteraktionen reagieren und die Sie relativ zum Ansichtsfenster oder einem bestimmten DOM-Element positionieren müssen.
  • Tooltips und Popovers. Beim Rendern von Tooltips oder Popovers müssen diese über anderen Komponenten angezeigt werden, unabhängig von ihrer Position im Komponentenbaum.

Wie React-Portale funktionieren

Wenn Sie eine Komponente in React rendern, hängen Sie deren Ausgabe traditionell an den DOM-Knoten der übergeordneten Komponente an. Dies funktioniert in den meisten Szenarien gut, wird jedoch zu einer Einschränkung, wenn Sie Inhalte außerhalb der Hierarchie des übergeordneten Elements rendern müssen.

Angenommen, Sie erstellen einen modalen Dialog. Standardmäßig platzieren Sie den Inhalt des Modals innerhalb der DOM-Knoten der übergeordneten Komponente.

Dies kann zu Stilkonflikten und anderem unbeabsichtigtem Verhalten führen, da der Inhalt des Modals die Stile und Einschränkungen seiner übergeordneten Komponenten übernimmt.

React Portals beheben diese Einschränkung, indem Sie ein Ziel-DOM-Element angeben können, in dem die Ausgabe einer Komponente gerendert werden soll.

Dies bedeutet, dass Sie jedes UI-Element außerhalb der DOM-Hierarchie des übergeordneten Elements rendern können und sich so von den Einschränkungen der Stile und des Layouts des übergeordneten Elements befreien können.

So verwenden Sie Reaktionsportale

Modale sind ein perfektes Beispiel dafür, wann Sie React-Portale verwenden können. Dieser Beispielcode erläutert die Vorgehensweise.

Richten Sie eine Basic React-Anwendung ein

Stellen Sie vor dem Erstellen eines Portals sicher, dass Sie eine grundlegende React-Anwendung eingerichtet haben. Sie können verwenden Tools wie Create React App ein Projekt schnell aufbauen.

Erstellen Sie ein Portal für Modals

Um ein Portal zu erstellen, verwenden Sie das ReactDOM.createPortal() Funktion. Es benötigt zwei Argumente: den Inhalt, den Sie rendern möchten, und einen Verweis auf den DOM-Knoten, in dem er gerendert werden soll.

In diesem Beispiel rendert die Modal-Komponente ihre untergeordneten Elemente mithilfe eines Portals. Der Inhalt wird im DOM-Element mit der ID „root“ angezeigt.

// Modal.js
import ReactDOM from"react-dom";
const Modal = ({ children }) => {
const modalRoot = document.getElementById("root");
return ReactDOM.createPortal(children, modalRoot);
};
exportdefault Modal;

Sie können den Inhalt eines bestimmten Modals in einer bestimmten Komponente definieren. Diese ModalContent-Komponente enthält beispielsweise einen Absatz und einen Schließen Taste:

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




exportdefault ModalContent;

Anschließend können Sie das Modal über einen in App.js definierten Schaltflächenklick öffnen:

// 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 (






exportdefault App;

In diesem Beispiel rendert die Modal-Komponente ihren Inhalt mithilfe eines Portals, losgelöst von der Hauptkomponentenhierarchie.

Beispiele aus der Praxis

Reaktionsportale sind in verschiedenen Alltagssituationen nützlich.

  • Benachrichtigungssystem: Wann Erstellen eines Benachrichtigungssystemsmöchten Sie häufig Meldungen oben auf dem Bildschirm anzeigen, unabhängig davon, wo sich die aktuelle Komponente befindet.
  • Kontextmenü: Kontextmenüs sollten in der Nähe der Stelle angezeigt werden, auf die der Benutzer klickt, unabhängig davon, wo sie sich in der DOM-Hierarchie befindet.
  • Integration von Drittanbietern: Bibliotheken von Drittanbietern müssen häufig auf beliebige Teile des DOM abzielen.

Best Practices für die Portalnutzung

Befolgen Sie diese Tipps, um React Portals optimal zu nutzen:

  • Wählen Sie die richtigen Fälle aus: Portale sind flexibel, aber nicht alles braucht sie. Verwenden Sie Portale, wenn regelmäßiges Rendern zu Problemen oder Konflikten führt.
  • Halten Sie Portalinhalte getrennt: Wenn Sie Inhalte über Portale rendern, stellen Sie sicher, dass sie in sich geschlossen sind. Es sollte sich nicht auf übergeordnete Stile oder Kontext verlassen.
  • Ereignisse und Aktionen verwalten: Bei Portalen funktionieren Ereignisse aufgrund der losgelösten Inhalte etwas anders. Behandeln Sie die Ereignisweitergabe und -aktionen ordnungsgemäß.

Vorteile von Reaktionsportalen

React Portals bieten mehrere Vorteile, die die Entwicklung komplexer Benutzeroberflächen verbessern können. Sie:

  • Helfen Sie dabei, UI-Belange vom Hauptkomponentenbaum zu trennen und so die Wartbarkeit und Lesbarkeit des Codes zu verbessern.
  • Bieten Sie Flexibilität für Komponenten, die außerhalb ihrer übergeordneten Komponente angezeigt werden müssen.
  • Erleichtern Sie die Erstellung von Modalitäten und Overlays, die vom Rest der Benutzeroberfläche getrennt sind.
  • Ermöglicht Ihnen die einfache Steuerung des Z-Index von Komponenten und stellt so sicher, dass Sie Ihre UI-Elemente sauber übereinander schichten und stapeln können.

Mögliche Fallstricke und Überlegungen

Obwohl React-Portale hilfreich sind, sollten Sie Folgendes beachten:

  • CSS-Probleme: Portale können zu unerwartetem Verhalten im CSS-Stil führen, da sie Inhalte außerhalb der übergeordneten Komponenten platzieren. Verwenden Sie globale Stile oder verwalten Sie den CSS-Bereich sorgfältig.
  • Barrierefreiheit: Wenn Sie Portale zum Rendern von Inhalten verwenden, denken Sie daran, Barrierefreiheitsfunktionen wie Tastaturnavigation und Bildschirmlesekompatibilität beizubehalten.
  • Serverseitiges Rendering: Portale passen möglicherweise nicht gut zusammen Serverseitiges Rendering (SSR). Verstehen Sie die Auswirkungen und Einschränkungen der Verwendung von Portalen in SSR-Setups.

Die Benutzeroberfläche über die Norm hinaus vorantreiben

React Portals bieten eine leistungsstarke Lösung für den Umgang mit komplizierten UI-Situationen, bei denen Inhalte außerhalb der Grenzen übergeordneter Komponenten angezeigt werden müssen.

Indem Sie Portale verstehen und Best Practices nutzen, können Sie Benutzeroberflächen erstellen, die anpassungsfähiger und einfacher zu warten sind und gleichzeitig Probleme vermeiden.

Unabhängig davon, ob Sie Modalitäten erstellen oder Bibliotheken von Drittanbietern einbinden, bieten React-Portale eine leistungsstarke Antwort auf anspruchsvolle UI-Anforderungen.