Le modèle standard : Enfants dans le DOM du parent

Dans le fonctionnement standard de React, la structure de votre arbre de composants se reflète directement dans la structure de l'arbre DOM généré. Lorsqu'un composant `Parent` rend un composant `Enfant`, le noeud DOM correspondant à `Enfant` est physiquement ajouté comme un enfant du noeud DOM de `Parent` dans le navigateur.

function Parent() {
  return (
    

      
Titre Parent
      
    
  );
}

function Enfant() {
  return 
Contenu enfant.
;
}

// DOM résultant (simplifié) :
// 

//   
Titre Parent
//   
Contenu enfant.
// 

Cette correspondance directe entre l'arbre React et l'arbre DOM est logique et fonctionne parfaitement pour la majorité des mises en page et des structures d'interface utilisateur. Elle assure une organisation claire et facilite le raisonnement sur le flux de données et d'événements.

Les contraintes CSS et visuelles de la hiérarchie

Cependant, cette imbrication stricte dans le DOM peut devenir une contrainte pour certains types de composants dont le rendu visuel doit "s'échapper" de leur conteneur parent immédiat. Le problème vient souvent des propriétés CSS appliquées aux éléments parents.

Imaginez les scénarios suivants :

• overflow: hidden ou overflow: scroll : Si un composant parent (ou un ancêtre) a une propriété `overflow` définie, tout contenu enfant qui dépasse les limites de ce parent sera coupé ou nécessitera un défilement à l'intérieur du parent. C'est problématique pour une tooltip ou un menu déroulant qui doit pouvoir s'afficher par-dessus d'autres éléments, même s'il est déclenché depuis un composant situé dans ce conteneur restreint.
• Contexte d'empilement (z-index) : Le positionnement avec `z-index` dépend de la création de contextes d'empilement. Un composant enfant, même avec un `z-index` élevé, ne pourra jamais apparaître visuellement au-dessus d'un élément frère de son ancêtre si cet ancêtre a créé un contexte d'empilement (par exemple, avec `position: relative` et un `z-index` défini). C'est un obstacle majeur pour les boîtes de dialogue modales qui doivent couvrir toute la page.
• Transformations CSS (transform) : Les transformations appliquées à un parent peuvent également affecter le positionnement et le contexte d'empilement de ses enfants de manière inattendue.

Dans tous ces cas, le fait que l'élément enfant (la modale, la tooltip) soit physiquement un descendant DOM de l'élément parent avec des styles contraignants empêche d'obtenir l'effet visuel désiré (s'afficher librement par-dessus le reste de l'interface).

La nécessité de "téléporter" le rendu DOM

Face à ces limitations visuelles imposées par la structure DOM et le CSS, il devient nécessaire de trouver un moyen de découpler l'emplacement logique d'un composant dans l'arbre React de son emplacement physique dans l'arbre DOM.

Idéalement, nous voudrions pouvoir dire : "Ce composant `Modal` fait logiquement partie de mon composant `UserProfile`, il reçoit ses props et peut accéder à son contexte, mais je veux que son rendu DOM soit attaché directement à la fin du `` de la page (ou dans un autre conteneur de haut niveau), pour qu'il ne soit pas affecté par les styles `overflow` ou `z-index` de `UserProfile` ou de ses ancêtres".

C'est précisément ce besoin de "téléportation" DOM, tout en conservant les liens logiques et comportementaux de React (comme la propagation desévénements et l'accès au contexte), qui a conduit à l'introduction des Portails en React. Ils offrent une solution propre pour rendre des composants enfants dans un emplacement différent de l'arbre DOM, résolvant ainsi élégamment les problèmes de contraintes CSS mentionnés ci-dessus.