如何修复reactdom.unmountcomponentatnode reform中的react中的错误？

Question

reactdom.unmountcomponentatnode（document.getElementById（“ root”））;在最新反应中不可用。

它显示下面的错误。我该如何修复？

“您正在调用reactdom.unmountcomponentatnode（），该容器以前传递给reactdomclient.createroot（）。不支持这。您是要调用root.unmount（）吗？”

“ UnmountComponentAtnode（）：您正在尝试卸载的节点是由React渲染的，并且不是顶级容器。相反，让Parent Component更新其状态和rerender，以删除此组件。”

import {createRoot} from "react-dom/client";
const container = document.getElementById('root');
const root = createRoot(container);
root.render(<App tab={"home"} />);
root.unmount();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from "react";

class LifeCycle extends React.Component {

    state = {opacity: 1};

    disappear = () => {
        root.unmount(document.getElementById("root"));
    }

    componentDidMount() {
        this.timer = setInterval(() => {
            let {opacity} = this.state;
            opacity-=0.1
            if (opacity <= 0) opacity = 1;
            this.setState({opacity});
        }, 200);
    }

    componentWillUnmount() {
        clearInterval(this.timer)
    }

    render() {
        return (
            <div>
                <h1 style={{opacity: this.state.opacity}}>React is too difficult!</h1>
                <button onClick={this.disappear}>click to remove</button>
            </div>
        )
    }
}


export default LifeCycle;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>