Quiero obtener la posición del componente Habilidades y agregar una animación cuando el desplazamiento llegue a ese punto. Sin embargo, devuelve un error "Error de tipo: no se puede leer la propiedad 'getBoundingClientRect' de nulo". Intenté seguir este blog pero no sé qué estoy haciendo mal. ¿Puede alguien ayudarme?
Tarjeta.js
import classes from './Card.module.css'; import React from 'react'; const Card = React.forwardRef((props, ref) => { return ( <section className={`${classes.card} ${props.className}`} id={props.id} ref={ref} > {props.children} </section> ); }); export default Card;Habilidades.js
const Skills = () => { const ref = React.createRef(); const topPos = ref.current.getBoundingClientRect().top; const onScroll = () => { const scrollPos = window.scrollY + window.innerHeight; if (topPos > scrollPos) { // enter animation code here } }; useLayoutEffect(() => { window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); return ( <Card className={classes.skills} id='skills' ref={ref}> <H2>Skills</H2> <div className={classes['skills-list-container']}> <div className={classes['skills-list']}>{skillsList}</div> </div> </Card> ); }; export default Skills;ref.current antes de que se adjunte al elementoDespués de crear una referencia, deberá esperar el renderizado inicial, luego esa referencia se adjuntará a un elemento real.
Al hacer lo anterior, está accediendo a ref.current antes de que el renderizado inicial resulte en un valor nulo.
Así que simplemente muévalo dentro de su función onScroll así:
const onScroll = () => { const topPos = ref.current.getBoundingClientRect().top; <-- MOVE HERE const scrollPos = window.scrollY + window.innerHeight; if (topPos > scrollPos) { // enter animation code here } }; Mover su ref.current al cuerpo eventHandler porque ese controlador solo se activa después de que el componente se representa por completo, por lo que la referencia ya está adjunta.