使用createRoot()方法创建的react组件在调用ReactDOM.unmountComponentAtNode()方法卸载报错的解决方案

在React 17及更高版本中，createRoot 方法用于创建并挂载根组件。当你使用 createRoot 创建并挂载组件后，可以通过 unmount 方法来卸载组件。

以下是使用 createRoot 方法创建并卸载组件的示例代码：

import React from 'react';
import ReactDOM from 'react-dom';
 
const App = () => (
  <div>
    <h1>Hello, World!</h1>
  </div>
);
 
const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);
 
// 当需要卸载组件时，可以调用 unmount 方法
root.unmount();

在这个例子中，我们首先导入了 React 和 ReactDOM。然后我们定义了一个名为 App 的函数组件，它返回一个简单的 HTML 结构。接下来，我们通过 document.getElementById 获取页面中的一个元素作为挂载点。

使用 ReactDOM.createRoot(rootElement) 创建一个新的根组件实例，并使用 root.render(<App />) 将 App 组件渲染到挂载点上。最后，当我们需要卸载组件时，我们调用 root.unmount() 方法来移除挂载的组件。这样就完成了组件的卸载。