Comprendre les portails React et leur importance

Les portails React fournissent un moyen de premier ordre pour rendre et permettre aux composants enfants, qui sont généralement présents en dehors du DOM, de vivre dans un nœud Document Object Model (DOM). Ce composant de portail React existe en dehors de la hiérarchie DOM du composant parent. Lorsque le composant enfant se sépare visuellement de son composant parent, le portail peut être utilisé comme boîte de dialogue modale, info-bulle ou chargeur pour créer le composant enfant. Ci-dessous se trouve une syntaxe, le format standard que nous devons utiliser dans notre code tel qu'il est, qui nous aide à comprendre cette implémentation dans React.

Syntaxe de React Portal

Dans la syntaxe ci-dessous, le premier argument (enfant) est n'importe quel composant que nous souhaitons afficher, tel qu'un élément, une chaîne ou un fragment. Le deuxième argument (conteneur) est un élément DOM.

ReactDOM.createPortal(child, container)

L'importance d'utiliser des portails

Un portail se comporte comme un composant normal de React et il peut être n'importe où dans le arbre DOM. Il a toute la puissance des autres composants de React. Vous trouverez ci-dessous les avantages de l'utilisation des portails React :

1. Les portails React peuvent utiliser le contexte pour transférer des données. qui est situé dans l'arborescence REACT DOM.

Quand vous devez utiliser un portail

S'il y a un modal dans son composant parent, le modal obtiendra la largeur et la hauteur de son composant parent. Il est également possible que le modal soit rogné et ne s'affiche pas correctement dans l'application. Pour une solution, nous allons essayer de le corriger en utilisant une propriété CSS telle que overflow, hidden et z-index. figure, il y a à l'intérieur de son composant parent qui réside dans la largeur et la hauteur des composants parents. un nœud DOM en dehors de la  racine hiérarchie de l'arborescence.

Il s'agit d'un composant enfant utilisant un portail. Le code ci-dessous explique comment le récupérer dans notre composant parent.

Fig.2 Modal avec React Portal

Dans la figure ci-dessus, le modal est présent dans le DOM hiérarchie mais pas à l'intérieur de son composant parent. Ce modal utilise le "createPortal ()" et ne résidera pas dans la largeur et la hauteur particulières, mais aura tous les avantages d'un composant React et est applicable dans ce composant de portail.

Les portails React sont faciles à comprendre[19659019]Même lorsque le composant réside en dehors de la hiérarchie DOM, nous pouvons utiliser les portails React pour fonctionner comme nous le ferions normalement dans la hiérarchie. Pour plus d'informations sur ces services techniques, contactez nos experts dès aujourd'hui.

À propos de l'auteur

Gauravweni Hedaoo est consultante technique chez Perficient Inc. Elle travaille actuellement en tant que développeur front-end avec l'équipe CAT. Elle veut explorer, apprendre et partager toutes les nouvelles modifications de mise à jour dans JavaScript et dans React.

Plus de cet auteur