Portal

Definition

Permet de rendre un composant enfant dans un noeud DOM situe en dehors de la hierarchie du parent. Les evenements remontent toujours dans l'arbre React.

Analogie

Comme un tunnel secret : le composant vit dans la maison React mais sort par une porte cachee dans un autre endroit du DOM.

Exemple de code

import { createPortal } from 'react-dom';

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

Cas d'usage

Modales, tooltips, menus deroulants qui doivent echapper au overflow:hidden du parent.

Anti-pattern

Termes lies