unmountComponentAtNode
unmountComponentAtNode retire un composant React monté du DOM.
unmountComponentAtNode(domNode)Référence
unmountComponentAtNode(domNode)
Appelez unmountComponentAtNode pour retirer un composant React monté du DOM et nettoyer ses gestionnaires d’événements et son état.
import { unmountComponentAtNode } from 'react-dom';
const domNode = document.getElementById('root');
render(<App />, domNode);
unmountComponentAtNode(domNode);Voir d’autres exemples ci-dessous.
Paramètres
domNode: un élément DOM. React retirera le composant React monté à partir de cet élément.
Valeur renvoyée
unmountComponentAtNode renvoie true si un composant a été démonté, ou false dans le cas contraire.
Utilisation
Appelez unmountComponentAtNode pour retirer un composant React monté à partir d’un nœud DOM du navigateur et nettoyer ses gestionnaires d’événements et son état.
import { render, unmountComponentAtNode } from 'react-dom';
import App from './App.js';
const rootNode = document.getElementById('root');
render(<App />, rootNode);
// ...
unmountComponentAtNode(rootNode);Retirer une appli React d’un élément DOM
Vous souhaiterez occasionnellement « saupoudrer » du React dans une page existante, ou une page qui n’est pas intégralement écrite en React. Dans de tels cas, vous pourriez avoir besoin « d’arrêter » une appli React en retirant toute son interface utilisateur (UI), son état et ses gestionnaires d’événements du nœud DOM dans lequel elle avait été affichée.
Dans l’exemple ci-dessous, cliquez sur « Afficher l’appli React » pour… afficher l’appli React. Cliquez sur « Démonter l’appli React » pour la détruire :
import './styles.css'; import { render, unmountComponentAtNode } from 'react-dom'; import App from './App.js'; const domNode = document.getElementById('root'); document.getElementById('render').addEventListener('click', () => { render(<App />, domNode); }); document.getElementById('unmount').addEventListener('click', () => { unmountComponentAtNode(domNode); });