Elemente teleportieren mit React Portals

Snippet

Elemente teleportieren mit React Portals

Portals ermöglichen es, Komponenten in einen anderen Teil des DOM-Baums zu rendern, außerhalb der Hierarchie der Elternkomponente. Dies ist essenziell für UI-Elemente wie Modale oder Tooltips, die aus 'overflow: hidden' oder 'z-index' Beschränkungen ausbrechen müssen, während das Event-Bubbling und das State-Verhalten von React erhalten bleiben.

snippet.js
javascript
import { createPortal } from 'react-dom';
 
function Modal({ children }) {
  return createPortal(
    <div className="modal-overlay">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

react

Erklärung

import { createPortal } from 'react-dom';

Importiert die spezialisierte Methode aus dem react-dom Paket zur Erstellung von Portalen.

createPortal(..., document.getElementById('modal-root'))

Nimmt die React-Kinder und einen Ziel-DOM-Knoten entgegen, in den die Kinder eingehängt werden sollen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verwandt

Aus deiner Bibliothek