Rendern außerhalb der DOM-Hierarchie mit Portals

Snippet

Rendern außerhalb der DOM-Hierarchie mit Portals

Portals bieten eine Möglichkeit, Kinder in einen DOM-Knoten zu rendern, der außerhalb der DOM-Hierarchie der Elternkomponente existiert. Dies ist entscheidend für UI-Elemente wie Modale oder Tooltips, die nicht von 'overflow: hidden' oder 'z-index' im Elternteil beeinflusst werden sollen.

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

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

Nimmt die React-Kinder und ein Ziel-DOM-Element entgegen, in das sie gerendert werden sollen.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Verwandt

Aus deiner Bibliothek