Maîtriser les Portails React : Un Guide Complet et un Tutoriel

19 Août 2023

Dans le monde de React, la création d'interfaces utilisateur dynamiques est une exigence courante. Parfois, vous devez rendre des composants en dehors de leur hiérarchie parente ou créer des superpositions telles que des modales ou des infobulles. Dans de tels cas, les Portails React viennent à la rescousse. Dans ce tutoriel, nous plongerons dans les Portails React, en comprenant ce qu'ils sont et comment les utiliser efficacement pour créer des composants d'interface utilisateur dynamiques et polyvalents.

Qu'est-ce que les Portails React ?

Imaginez que vous avez un composant React au fond de votre arborescence de composants, mais que vous voulez rendre quelque chose de ce composant au niveau supérieur de votre hiérarchie DOM. C'est là que les Portails React brillent. Les Portails React fournissent un moyen de rendre les enfants d'un composant dans une autre partie de l'arborescence DOM, en dehors de la hiérarchie parente.

Avantages des Portails React

Isolation : Les Portails vous permettent d'isoler certains composants d'interface utilisateur du reste de votre application, ce qui facilite la gestion de scénarios d'interface utilisateur complexes.
Superposition : Vous pouvez créer des superpositions, des modales et des infobulles qui apparaissent au-dessus d'autres contenus, sans être contraints par la hiérarchie des composants.
Accessibilité : Les Portails vous permettent d'améliorer l'accessibilité de votre interface utilisateur en rendant le contenu là où il a le plus de sens dans le DOM.
Code propre : Les Portails contribuent à maintenir la logique de vos composants propre et ciblée, car vous pouvez séparer les préoccupations de rendu de l'interface utilisateur du composant parent.

Cas Pratique

Plongeons dans un exemple pratique de l'utilisation des Portails React pour créer un composant modal.

Étape 1 : Créez un composant modal

1// Modal.js
2
3import React, { useEffect, useState } from 'react'
4import ReactDOM from 'react-dom'
5
6const rootPortal = document.getElementById('modal-root')
7
8export const Modal = ({ children }) => {
9  const [isOpen, setIsOpen] = useState(false)
10
11  // add open and close modal logic
12
13  return ReactDOM.createPortal(
14    <div>
15      <h1>My modal</h1>
16    </div>,
17    rootPortal
18  )
19}

Dans ce code, nous créons un composant fonctionnel Modal qui utilise les Portails React. Il rend ses enfants dans un nœud DOM séparé (rootPortal) en dehors de la hiérarchie normale des composants React.

Étape 2 : Configuration du portail

Maintenant, utilisons notre composant Modal dans une autre partie de notre application.

Pour ce faire, nous devons placer notre balise avec l'identifiant correct au sommet de notre application. Dans le cas d'une application React, nous pourrions la placer dans index.js ici :

1// index.js
2
3import React from 'react';
4import ReactDOM from 'react-dom/client';
5import './index.css';
6import App from './App';
7import reportWebVitals from './reportWebVitals';
8
9const root = ReactDOM.createRoot(
10  document.getElementById('root') as HTMLElement
11);
12root.render(
13  <React.StrictMode>
14    <div className="modal-root"/>
15    <App />
16  </React.StrictMode>
17);
18
19reportWebVitals();

Step 3 : Utiliser le composant Modal

Maintenant, utilisons notre composant Modal dans une autre partie de notre application :

1// Profile.js
2
3export const Profile = () => {
4  return (
5    <div className="profile">
6      <img src={profilePicture} className="profile-picture" alt="logo" />
7      <div className="profile-name">Your Name</div>
8      <div className="profile-bio">Your Bio</div>
9      <Modal>
10        <h1>My content</h1>
11      </Modal>
12    </div>
13  )
14}

Dans ce cas, notre Modal sera téléporté en haut de notre application, en dessous de la balise <App />.

Conclusion

Les Portails React offrent un moyen puissant de rendre des composants en dehors de leur hiérarchie parente, vous permettant de créer des interfaces utilisateur dynamiques et polyvalentes. Que vous construisiez des modales, des infobulles ou d'autres composants de superposition, les Portails React sont un outil précieux dans votre boîte à outils de développement React.

En maîtrisant les Portails React, vous pouvez améliorer l'expérience utilisateur de vos applications et créer des interfaces utilisateur plus interactives et engageantes. Alors, n'hésitez pas, expérimentez avec les Portails React et débloquez de nouvelles possibilités pour vos projets React.

Si vous avez apprécié ce tutoriel, envisagez de me suivre pour plus de contenu utile. Votre soutien est grandement apprécié ! Merci !

X _brdnicolas

Happy coding!