Ein Portal rendert untergeordnete Elemente an einer anderen Stelle im DOM (außerhalb der DOM-Hierarchie des Elternteils), während es sie im React-Komponentenbaum behält — daher funktionieren Kontext, Props und Events, als wären sie normal verschachtelt.
{ createPortal } ;
() {
(
,
.()
);
}
Modale, Tooltips, Dropdowns und Toasts müssen einem overflow: hidden oder z-index Stapelungskontext eines Vorfahren entkommen. Wenn das Modal tief in einer Karte mit overflow: hidden verschachtelt wäre, würde es abgeschnitten. Das Rendern zu body über ein Portal vermeidet das ganz.
Das ist der subtile, kraftvolle Teil: Obwohl das Modal-DOM unter body lebt, wird ein onClick auf einem React-Vorfahren immer noch ausgelöst, weil Event Bubbling dem React-Baum folgt, nicht dem DOM-Baum:
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Ein Portal löst das Positioning, nicht a11y. Für Dialoge brauchen Sie immer noch Focus Trapping, role="dialog"/aria-modal und Escape-to-close (oder verwenden Sie das native Element <dialog>, das vieles davon übernimmt).