ReactDOM.unmountComponentAtNode(document.getElementById("root")); no están disponibles en el último React.
Muestra los errores a continuación. ¿Cómo puedo arreglarlo?
"Está llamando a ReactDOM.unmountComponentAtNode() en un contenedor que se pasó previamente a ReactDOMClient.createRoot(). Esto no es compatible. ¿Quería llamar a root.unmount()?"
"unmountComponentAtNode(): el nodo que está intentando desmontar fue renderizado por React y no es un contenedor de nivel superior. En su lugar, haga que el componente principal actualice su estado y vuelva a renderizar para eliminar este componente".
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>