unmountComponentAtNode

Tidak Digunakan

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)

Panggil unmountComponentAtNode untuk menghapus komponen React yang telah terpasang dari DOM dan membersihkan event handler beserta 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.

Kembalian

unmountComponentAtNode mengembalikan true jika komponen tersebut telah berhasil dilepas dan false jika tidak.


Penggunaan

Panggil unmountComponentAtNode untuk menghapus komponen React yang sudah terpasang dari simpul DOM peramban dan bersihkan event handler beserta 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:

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