Question

0

342

Visualizações

ReactDOM.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?

Código ejecutableSandbox

 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;

over 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-07-05T09:35:12.175Z

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.