Wozu dienen Portale in React?

Portale in React ermöglichen das Rendern von Kindkomponenten in einen DOM-Knoten, der außerhalb der Hierarchie der Elternkomponente liegt. Dies ist nützlich, wenn ein Element über anderen angezeigt werden soll, z.B. modale Fenster, Tooltips oder Dropdown-Menüs, um Probleme mit CSS-Stilen, z-index oder Positionierung zu vermeiden.

Beispiel für die Verwendung eines Portals:

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

function Modal({ children }) {
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
}

Hier wird der Inhalt des modalen Fensters im Element mit der ID "modal-root" gerendert, das außerhalb des Hauptwurzels der Anwendung liegen kann.