Un portail rend les enfants à un endroit différent dans le DOM (en dehors de la hiérarchie DOM du parent), tout en les gardant dans l'arborescence des composants React — donc le contexte, les props et les événements fonctionnent comme s'ils étaient imbriqués normalement.
{ createPortal } ;
() {
(
,
.()
);
}
Les modales, les infobulles, les menus déroulants et les toasts doivent échapper au overflow: hidden ou au contexte d'empilement z-index d'un ancêtre. Si la modale était imbriquée profondément dans une carte avec overflow: hidden, elle serait coupée. La rendre dans le body via un portail l'évite complètement.
C'est la partie subtile et puissante : bien que le DOM de la modale vive sous body, un onClick sur un ancêtre React déclenche toujours, parce que la propagation des événements suit l'arborescence React, pas l'arborescence DOM :
<div onClick={handleParentClick}> {/* still fires for clicks inside the portal */}
<Modal>...</Modal>
</div>
Un portail résout le positionnement, pas a11y. Pour les boîtes de dialogue, vous avez toujours besoin du focus trapping, de role="dialog"/aria-modal et de Escape-to-close (ou utilisez l'élément natif <dialog> qui gère une grande partie de cela).