0
296
VistasReactDOM.createPortal() representa un elemento vacío cuando se llama en una función
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;
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta