Esta es la parte de mi aplicación de reacción, donde he usado un ref.current que es igual a nulo, luego estoy cambiando su propiedad, sé que esto seguramente me dará un error, pero en uno de los proyectos de mi amigo con mismo componente de reacción WorkPage está funcionando bien. Estoy tan confundido, ¿hay algún tipo de falla en el mío?
const WorkPage = () => { const ref = useRef(null); useEffect(() => { let element = ref.current; const rotate = () => { element.style.transform = `translateX(${-window.pageYOffset}px)` }; window.addEventListener('scroll', rotate) return () => window.removeEventListener('scroll', rotate) }, [])Seguramente arrojará un error, porque no asignó ref a ningún elemento DOM, por lo que ref.current siempre es null . Asegúrate de asignarlo a un elemento DOM como este:
const WorkPage = () => { const ref = useRef(null); useEffect(() => { let element = ref.current; const rotate = () => { element.style.transform = `translateX(${-window.pageYOffset}px)`; }; window.addEventListener("scroll", rotate); return () => window.removeEventListener("scroll", rotate); }, []); // assign ref to one of your DOM element return <div ref={ref}>your element</div>; };No se garantiza que refs se configure en el primer renderizado caveats-with-callback-refs, por lo que debe verificar si el elemento existe antes de intentar manipularlo directamente en el DOM
if (ref && ref.current) { // do something }En el primer renderizado, la referencia no está definida. Puede usar el operador de encadenamiento opcional
let element = ref?.current;