unmountComponentAtNode

Dépréciation

Cette API sera retirée d’une future version majeure de React.

React 18 a remplacé unmountComponentAtNode par root.unmount().

unmountComponentAtNode retire un composant React monté du DOM.

unmountComponentAtNode(domNode)

Référence
- unmountComponentAtNode(domNode)
Utilisation
- Retirer une appli React d’un élément DOM

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 :

Fork

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);
});

Précédentrender

SuivantFonctions côté client