Tengo una aplicación React.js simple que intenta representar contenido en un Portal en una devolución de llamada, ¿alguien tiene alguna idea de por qué no está representando nada?
import React from 'react' import ReactDOM from 'react-dom' import './App.css'; function App() { const showElement = React.useCallback(() => { const element = document.createElement('div'); document.querySelector('body').appendChild(element) ReactDOM.createPortal(() => <div>TEST</div>, element) }, []) return ( <div className="App"> <button onClick={showElement}>Click to Render Portal</button> </div> ); } export default App;
No está devolviendo el portal creado en la devolución del componente de la App
, por lo que en realidad no se representa.
Prueba algo más como:
function App() { const elementRef = useRef(document.createElement("div")); const showElement = React.useCallback(() => { document.querySelector("body").appendChild(elementRef.current); }, []); return ( <div className="App"> <button onClick={showElement}>Click to Render Portal</button> {ReactDOM.createPortal(<div>TEST</div>, elementRef.current)} </div> ); }
Esto crea una referencia de React para contener el elemento DOM creado, representa el portal con el retorno del componente JSX y agrega DOMNode en el controlador onClick
del botón.