API Referansı
APIs

unmountComponentAtNode

Kullanımdan Kaldırıldı

Bu API, React’ın gelecekteki majör sürümlerinden birinde kaldırılacaktır.

unmountComponentAtNode React 18 de root.unmount() ile değiştirildi.

unmountComponentAtNode DOM’dan monte edilmiş bir React bileşenini kaldırır.

unmountComponentAtNode(domNode)

Başvuru Dökümanı

unmountComponentAtNode(domNode)

unmountComponentAtNode fonksiyonunu kullanarak, monte edilmiş bir React bileşenini DOM’dan kaldırabilir ve olay yöneticilerini ve state’i temizleyebilirsiniz.

import { unmountComponentAtNode } from 'react-dom';

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

unmountComponentAtNode(domNode);

Aşağıda daha fazla örnek görebilirsiniz.

Parametreler

  • domNode: Bir DOM elemanı. React, monte edilmiş bir React bileşenini bu elemandan kaldıracaktır.

Geri Dönüş Değeri

unmountComponentAtNode, bir bileşen kaldırıldıysa true döner, aksi takdirde false döner.

Kullanım

Monte edilmiş bir React bileşenini bir tarayıcı DOM öğesinden kaldırmak ve olay yöneticilerini ile state’i temizlemek için unmountComponentAtNode fonksiyonunu çağırın.

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

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

// ...
unmountComponentAtNode(rootNode);

DOM elemanından bir React uygulaması kaldırmak

Bazen mevcut bir sayfaya veya tamamen React ile yazılmamış bir sayfaya React’i “serpmek” isteyebilirsiniz. Bunun gibi durumlarda, React uygulamalarını, bütün UI, state ve listener’ları render oldukları DOM öğesinden kaldırarak, React uygulamanızı “durdurmak” isteyebilirsiniz.

Bu örnekte “Render React App” butonuna basmak React uygulamasını render edecektir. Yok etmek için “Unmout React App” düğmesine tıklayabilirsiniz.

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
NextClient APIs