Перейти к содержанию

unmountComponentAtNode

Устарело

Этот API будет удален в одной из будущих основных версий React.

В React 18 функция unmountComponentAtNode была заменена на root.unmount().

unmountComponentAtNode удаляет смонтированный компонент React из DOM.

1
unmountComponentAtNode(domNode);

Описание

unmountComponentAtNode(domNode)

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

1
2
3
4
5
6
import { unmountComponentAtNode } from 'react-dom';

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

unmountComponentAtNode(domNode);

Параметры

  • domNode: DOM-элемент. React удалит смонтированный React-компонент из этого элемента.

Возвращает

unmountComponentAtNode возвращает true, если компонент был размонтирован, и false в противном случае.

Использование

Вызовите unmountComponentAtNode для удаления монтированного React компонента из узла DOM браузера и очистки его обработчиков событий и состояния.

1
2
3
4
5
6
7
8
import { render, unmountComponentAtNode } from 'react-dom';
import App from './App.js';

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

// ...
unmountComponentAtNode(rootNode);

Удаление приложения React из элемента DOM

Иногда вам может понадобиться "рассыпать" React на существующую страницу или страницу, которая не полностью написана на React. В таких случаях вам может понадобиться "остановить" React-приложение, удалив весь пользовательский интерфейс, состояние и слушателей из узла DOM, в который оно было отображено.

В этом примере нажатие кнопки "Render React App" приведет к рендерингу приложения React. Нажмите "Unmount React App", чтобы уничтожить его:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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);
    });

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

Источник — https://react.dev/reference/react-dom/unmountComponentAtNode

Комментарии