À propos de ce tutoriel
Les portails vont vous permettre de monter un composant sur un élément spécifique du DOM tout en le gardant dans votre élément react. Cela permet par exemple de créer une boite modale qui sera à la racine du body sans avoir à changer la structure de vos composants.
import React from "react";
import {createPortal} from 'react-dom'
function Modal({ onClose }) {
return createPortal(
<>
<div
className="modal fade show"
tabIndex="-1"
role="dialog"
style={{ display: "block" }}
>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Modal title</h5>
<button
type="button"
className="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true" onClick={onClose}>
×
</span>
</button>
</div>
<div className="modal-body">
<p>Modal body text goes here.</p>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-secondary"
data-dismiss="modal"
onClick={onClose}
>
Close
</button>
</div>
</div>
</div>
</div>
<div className="modal-backdrop fade show"></div>
</>, document.body
);
}