Necesito renderizar el componente de reacción a div con id hover-countdown. Entonces, como dice el nombre, no es visible cuando se carga la página, sino solo al pasar el mouse. ¿Esto de alguna manera afecta el renderizado de ReactDOM? Porque no soy capaz de renderizarlo. ¿Hay alguna otra manera? Gracias:)
const HoverCountdown = () => { return ( <span>Countdown</span> ); }; document.addEventListener("DOMContentLoaded", () => { ReactDOM.render( <HoverCountdown />, document.getElementById("hover-countdown") ); });¿Esto de alguna manera afecta el renderizado de ReactDOM?
Realmente no. React solo se ocupa de las actualizaciones de DOM.
Si el elemento que representa dentro es display: none , entonces el proceso de representación de React generará el DOM dentro de ese elemento.
Luego, posterior a la representación de React, el navegador convertirá el DOM en algo representado en la pantalla (que no será nada porque el contenedor se display: none ).
Si establece la visibility en hidden , al pasar el cursor sobre el componente invisible no se activará el efecto de los estilos :hover .
Lo que es extraño es que si inspecciona el elemento y alterna los :hidden , se mostrará correctamente.
const HoverCountdown = () => ( <span>Countdown</span> ); //document.addEventListener('DOMContentLoaded', () => { ReactDOM.render( <HoverCountdown />, document.getElementById('hover-countdown') ); //}); .wrapper { background: #EFE; } #hover-countdown { visibility: hidden; /* will render fine if removed */ } #hover-countdown:hover { visibility: visible; color: #040; cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div class="wrapper"> <div id="hover-countdown"></div> </div>