0Pricing
React Academy · Lektion

Was sind React-Portals?

Verstehen Sie die createPortal-API und warum das Rendern außerhalb des Root-Divs nützlich ist.

Was sind React-Portals? ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion lernen Sie, was React Portals sind, warum das Rendern außerhalb des übergeordneten DOM-Baums nützlich ist und wie Sie die createPortal-API verwenden.

Die normale React-DOM-Hierarchie

Standardmäßig rendert jede Komponente innerhalb des DOM-Knotens ihres übergeordneten Elements. Die gesamte React-App befindet sich normalerweise innerhalb eines einzigen `
`. Das funktioniert gut, bis ein Modal, ein Tooltip oder ein Dropdown einen übergeordneten Bereich mit `overflow: hidden` verlassen muss.

Was ist ein Portal?

Ein **Portal** ermöglicht es Ihnen, die Ausgabe einer Komponente in einem anderen DOM-Knoten zu rendern – einem Knoten außerhalb des React-Roots. Der React-Baum der Komponente bleibt unverändert; nur die Position im DOM ändert sich.
import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.body // render into body, not parent
  );
}

Warum es Portals gibt

CSS-Eigenschaften wie `overflow: hidden`, Stacking Contexts durch `z-index` und `transform` bei einem übergeordneten Element können untergeordnete Elemente abschneiden oder ausblenden. Portals umgehen diese Einschränkungen, indem sie die gerenderte Ausgabe an einen anderen DOM-Knoten anhängen.

Event-Bubbling funktioniert weiterhin

Obwohl sich der DOM-Knoten des Portals außerhalb des übergeordneten Elements befindet, **steigen React-Ereignisse weiterhin auf** – durch den React-Komponentenbaum, nicht durch den DOM-Baum. Ein Klick innerhalb eines Portal-Modals wird bis zu seinem React-Elternelement weitergereicht.

Ein Portal-Ziel erstellen

Sie können in jeden vorhandenen DOM-Knoten ein Portal rendern. Ein gängiges Muster besteht darin, in `index.html` ein eigenes `
// index.html
<body>
  <div id="root"></div>
  <div id="modal-root"></div>
</body>

// Modal.jsx
createPortal(children, document.getElementById('modal-root'));

Der Portal-Lebenszyklus ist an das React-Elternelement gebunden

Ein Portal wird eingehängt, wenn seine übergeordnete Komponente eingehängt wird, und ausgehängt, wenn das übergeordnete Element ausgehängt wird. React verfolgt es weiterhin als Teil desselben Komponentenbaums, daher funktionieren Context und Refs wie gewohnt.

Context funktioniert über Portals hinweg

Da Portals Teil des React-Komponentenbaums bleiben, sind Context-Werte, die oberhalb des Portals bereitgestellt werden, auch innerhalb des Portals verfügbar. Die Position im DOM hat keinen Einfluss auf die React-Context-Kette.

createPortal mit State verwenden

Steuern Sie die Sichtbarkeit des Portals mit einer State-Variable. Schalten Sie sie mit einer Schaltfläche um. Der Portal-Inhalt erscheint dann in document.body, während die Schaltfläche an ihrer normalen Position im DOM bleibt.
function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={() => setOpen(true)}>Open</button>
      {open && createPortal(
        <div className="overlay">
          <button onClick={() => setOpen(false)}>Close</button>
        </div>,
        document.body
      )}
    </div>
  );
}

Serverseitiges Rendering und Portals

Portals benötigen einen vorhandenen DOM-Knoten und laufen daher immer clientseitig. Stellen Sie in Next.js oder anderen SSR-Setups sicher, dass der Portal-Rendercode nur im Browser ausgeführt wird, indem Sie `useEffect` oder eine Prüfung auf einen gesetzten Mounting-Status verwenden.

Schnelltest

React Portals rendern Inhalte in einem anderen DOM-Knoten. Welcher Aspekt des React-Komponentenbaums wird dadurch beeinflusst?

Zusammenfassung

Mit Portals können Sie React-Ausgaben mithilfe von createPortal() in jeden DOM-Knoten rendern. Der React-Baum, Context und Event-Bubbling bleiben unverändert. Verwenden Sie Portals, um bei Modals und Tooltips Einschränkungen durch overflow und z-index zu umgehen.

Als Nächstes

Nächste Lektion: **Ein Modal mit Portals erstellen** – Sie erstellen ein vollständig wiederverwendbares Modal, das mithilfe von Portals in document.body gerendert wird und dessen Öffnen und Schließen über State gesteuert wird.

Häufig gestellte Fragen

Ist die Lektion „Was sind React-Portals?“ kostenlos?

Ja — der vollständige Text von „Was sind React-Portals?“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Was sind React-Portals?“?

Verstehen Sie die createPortal-API und warum das Rendern außerhalb des Root-Divs nützlich ist. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Was sind React-Portals?“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Was sind React-Portals?
  2. Eine Modal-Komponente mit Portals erstellen
  3. Fokus und Tastaturfallen in Modals verwalten
  4. Tooltips und Dropdown-Menüs mit Portals
← Zurück zu React Academy