Approfondir les portails React avec des exemples | de Blessing Ene Anyebe | janvier 2023

Optimisez votre code en téléportant vos composants React

Table of Contents
Introduction
What Is React Portal
How To Use/Create React Portals
Examples With React Portals
Wrapping Up
Further References

React Portals est une fonctionnalité de la bibliothèque React JavaScript qui permet de restituer un composant React à un emplacement différent dans le DOM au lieu de l’endroit où il est déclaré. Selon la documentation React, les portails React offrent une méthode pour rendre les enfants dans un nœud DOM qui ne fait pas partie de la hiérarchie DOM du composant parent.

Les portails React sont comme le passage secret que vous pouvez utiliser pour échapper à un château fou à l’étroit avec des gens.

Vous pouvez voir les portails React comme un dispositif de téléportation pour vos composants React. Ils vous permettent d’envoyer un composant à un endroit différent dans le DOM, même s’il se trouve en dehors de l’arborescence DOM du composant parent. C’est comme dire : « Hé, ce composant se sent un peu à l’étroit à son emplacement actuel. Est-ce que ça peut aller traîner là-bas pendant un moment ?

Les portails React sont un moyen de rendre un élément de contenu React en dehors de l’arborescence actuelle des composants. Il est utile lorsque vous souhaitez avoir une relation parent-enfant dans vos composants alors que vous souhaitez rendre un composant enfant en dehors du parent.

Pour utiliser les portails React, vous devrez créer un élément conteneur dans le DOM HTML normal que vous utiliserez comme cible pour votre contenu React. Il peut s’agir de n’importe quel élément HTML valide ou d’enfants React pouvant être rendus, tels qu’un div, span, section, stringou alors fragment.

Élément de conteneur de portail créé en HTML DOM.

Ici, nous avons créé notre portail d’accueil (élément conteneur) en dehors de notre élément « racine » habituel.

Une fois que vous avez créé l’élément conteneur, vous pouvez utiliser le ReactDOM.createPortal() méthode pour rendre un élément React. Les createPortal() La fonction prend deux arguments : l’élément React à rendre et l’élément conteneur. Voici un exemple:

ReactDOM.createPortal(<childElement />, container);

Après avoir appelé createPortal(), l’élément React que vous avez fourni sera rendu dans l’élément conteneur et traité comme n’importe quel autre élément React de votre application. Vous pouvez le mettre à jour, lui transmettre des accessoires, ajouter des écouteurs d’événements, etc. Vous en verrez plus dans les exemples. Lorsque l’élément est démonté, le portail et son contenu sont automatiquement supprimés du DOM.

React Portal est utile car il peut améliorer les performances en vous permettant de rendre certains composants en dehors de la hiérarchie principale des composants React. Le fait d’avoir moins de composants nécessitant un nouveau rendu à chaque fois que l’état de votre application change peut améliorer les performances globales de votre application.

Les portails React peuvent augmenter la flexibilité et la maintenabilité de votre application en vous permettant de gérer différentes parties de votre interface utilisateur de manière plus modulaire. Parmi les autres rôles qu’il joue, citons les suivants :

• Composants de rendu avec un comportement de rendu complexe, tels que les modaux, les popovers et les info-bulles.
• Il crée une racine distincte pour certains composants, leur permettant d’être gérés indépendamment du reste de l’application.
• Il crée des composants qui apparaissent au-dessus des autres éléments de la page sans entrer en conflit avec d’autres éléments de l’arborescence des composants.
• Il améliore les performances d’une application en affichant certains composants en dehors de la hiérarchie principale des composants React.

Exemple 1 : Liste déroulante

//APP.JS
import React, { useState } from 'react';
import { createPortal } from 'react-dom';

  


import './Dropdown.css';
const Dropdown = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleDropdown = () => {
setIsOpen(!isOpen);
}
return (
<div className="dropdown">
<button className='Dropdown-btn' onClick={toggleDropdown}>
Dropdown
</button>
{isOpen && createPortal(
<div className="dropdown-menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>,
document.getElementById("portal")
)}
</div>
);
};
export default Dropdown;

Dans ce code, nous avons un composant React appelé Dropdown qui affiche un menu déroulant lorsque vous cliquez sur le bouton. En utilisant React Portal, nous rendons le menu déroulant en dehors de la hiérarchie DOM du composant Dropdown. Le composant Dropdown a une variable d’état appelée isOpen qui détermine si le menu déroulant est ouvert ou fermé.

Lorsque le bouton est cliqué, le toggleDropdown la fonction est appelée, ce qui bascule la valeur de isOpen – les options. Si isOpen est vrai, le menu déroulant est rendu à l’aide de la createPortal fonction de React DOM. Lorsque le menu déroulant est fermé, le createPortal fonction ne rend rien, donc le menu déroulant n’est pas affiché. Lorsque le bouton est à nouveau cliqué, toggleDropdown est appelé, ce qui définit isOpen pour false et ferme le menu déroulant.

Vous pouvez jouer avec la sortie ici :

import React, { useState, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
const Tooltip = ({ text, children }) => {
const [showTooltip, setShowTooltip] = useState(false);
const ref = useRef();
useEffect(() => {
const onMouseEnter = () => setShowTooltip(true);
const onMouseLeave = () => setShowTooltip(false);
ref.current.addEventListener('mouseenter', onMouseEnter);
ref.current.addEventListener('mouseleave', onMouseLeave);
return () => {
ref.current.removeEventListener('mouseenter', onMouseEnter);
ref.current.removeEventListener('mouseleave', onMouseLeave);
};
}, []);
const tooltip = showTooltip ? (
<div className="tooltip">{text}</div>
) : null;
return (
<div ref={ref}>
{children}
{createPortal(tooltip, document.body)}
</div>
);
};
const App = () => (
<div className="container">
<Tooltip text="This is a tooltip">
<button className="btn">Hover me</button>
</Tooltip>
</div>
);
export default App;

import React, { useState, useRef } from 'react';
import { createPortal } from 'react-dom';
import "./Modal.css"
const Modal = ({ children, onClose }) => {
const [isOpen, setIsOpen] = useState(true);
const modalRef = useRef();
const closeModal = e => {
if (e.target === modalRef.current) {
setIsOpen(false);
onClose();
}
};
if (!isOpen) {
return null;
}
return createPortal(
<div className="modal-overlay" ref={modalRef} onClick={closeModal}>
<div className="modal-content">
<button className="modal-close" onClick={closeModal}>
×
</button>
{children}
</div>
</div>,
document.body
);
};
const App = () => {
const [isModalOpen, setIsModalOpen] = useState(true);
const openModal = () => setIsModalOpen(true);
const closeModal = () => setIsModalOpen(false);
return (
<div className="container">
<button onClick={openModal}>Open modal</button>
{isModalOpen && (
<Modal onClose={closeModal}>
<h1>Modal title</h1>
<p>Modal content</p>
</Modal>
)}
</div>
);
};
export default App;

Want to Connect?
Connect with me on LinkedIn and Twitter.