• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

247
Views
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;
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

Editar reactdom-createportal-renderiza-elemento-vacío-cuando-se-llama-en-una-función

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error