unmountComponentAtNode

Deprecated

API ini akan dihapus pada versi mayor React yang akan datang.

Pada React 18, unmountComponentAtNode sudah digantikan oleh root.unmount().

unmountComponentAtNode menghapus komponen React yang telah terpasang dari DOM.

unmountComponentAtNode(domNode)

Referensi
- unmountComponentAtNode(domNode)
Penggunaan
- Menghapus aplikasi React dari elemen DOM

Referensi

`unmountComponentAtNode(domNode)`

Panggil unmountComponentAtNode untuk menghapus komponen React yang telah terpasang dari DOM dan membersihkan event handler dan state-nya.

import { unmountComponentAtNode } from 'react-dom';

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

unmountComponentAtNode(domNode);

Lihat contoh lainnya di bawah ini.

Parameter

domNode: Sebuah elemen DOM. React akan menghapus komponen React yang terpasang dari elemen ini.

Pengembalian

unmountComponentAtNode mengembalikan true jika sebuah komponen telah dicopot dan false jika tidak.

Penggunaan

Panggil unmountComponentAtNode untuk menghapus komponen React yang sudah terpasang dari simpul DOM peramban dan bersihkan event handler dan state-nya.

import { render, unmountComponentAtNode } from 'react-dom';
import App from './App.js';

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

// ...
unmountComponentAtNode(rootNode);

Menghapus aplikasi React dari elemen DOM

Terkadang, Anda mungkin ingin “menghiasi” dengan React halaman yang sudah ada, atau halaman yang tidak sepenuhnya ditulis dalam React. Dalam kasus tersebut, Anda mungkin perlu “menghentikan” aplikasi React, dengan menghapus semua UI, state, dan listener dari simpul DOM yang di-render.

Pada contoh ini, mengklik ”Render Aplikasi React” akan me-render aplikasi React. Klik “Lepas Aplikasi React” untuk menghancurkannya:

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

Previousrender NextAPI Klien