unmountComponentAtNode

Цей API буде видалено у наступному старшому релізі React.

У React 18 unmountComponentAtNode було замінено на root.unmount().

unmountComponentAtNode видаляє змонтований React-компонент з DOM.

unmountComponentAtNode(domNode)

Довідник

`unmountComponentAtNode(domNode)`

Викличте unmountComponentAtNode, щоб видалити змонтований React-компонент з DOM і очистити його обробники подій та стан.

import { unmountComponentAtNode } from 'react-dom';

const domNode = document.getElementById('root');
render(<App />, domNode);

unmountComponentAtNode(domNode);

Дивіться більше прикладів нижче.

Параметри

domNode: Елемент DOM. React видалить змонтований React-компонент з цього елемента.

Повернення

unmountComponentAtNode повертає true, якщо компонент було демонтовано, і false в іншому випадку.

Використання

Викличте unmountComponentAtNode, щоб видалити змонтований React-компонент </CodeStep> з <CodeStep data-step="2">вузла DOM браузера</CodeStep> та почистіть його обробники подій та state.</p> <pre><code data-meta="[[1, 5, "<App />"], [2, 5, "rootNode"], [2, 8, " rootNode"]]" class="language-js">import { render, unmountComponentAtNode } from 'react-dom'; імпортувати App з './App.js'; const rootNode = document.getElementById('root'); render(<App />, rootNode); // ... unmountComponentAtNode(rootNode);

Видалення React-застосунку з DOM-елемента

Іноді вам може знадобитися "додати" React на існуючу сторінку або сторінку, яка не повністю написана на React. У таких випадках вам може знадобитися "зупинити" React-застосунок, видаливши весь інтерфейс, стани та слухачів з DOM-вузла, на якому він був відрендерений.

У цьому прикладі натискання кнопки "Відрендерити React-застосунок" відрендерить React-застосунок. Натисніть "Демонтувати застосунок React", щоб знищити його:

<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <button id='render'>Render React App</button>
    <button id='unmount'>Unmount React App</button>
    <!-- This is the React App node -->
    <div id='root'></div>
  </body>
</html>

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

export default function App() {
  return <h1>Hello, world!</h1>;
}

[email protected]