Estoy tratando de crear un componente que actualice su imagen de origen en el desplazamiento cuando se hace referencia en su etiqueta div 'infoBG' en mi componente principal. La función parece funcionar, pero supongo que la declaración de devolución anula la función y solo devuelve la imagen original sin actualizar. ¿Cuál es la forma correcta de hacer esto para que la función actualice la primera imagen devuelta?
function Infoimg () { window.addEventListener("scroll", event => { var scrollValue = window.scrollY; var image = document.getElementById('infoBG'); if (scrollValue>100){ image.setAttribute = ('src','images/ccpLogo.svg'); }else{ image.setAttribute = ('src','images/Passport Stock Photo.svg'); } console.log(image) console.log(scrollValue); }); return( <img src={'images/Passport Stock Photo.svg'} alt='Info-Background'/> ) }Generalmente es una mala idea manipular el DOM directamente en React. En su lugar, confíe en enlaces y estados para actualizar las variables que se interpolarán en su plantilla.
En este caso, tiene sentido crear un nuevo estado usando el useState para permitir la lectura y escritura de la URL de su imagen y luego usar el setter devuelto por useState para actualizar el valor.
Además, algunos consejos prácticos:
useEffect() y agregar el detector de eventos en el procesamientouseEffect() para asegurarse de que su detector de eventos de desplazamiento se elimine correctamente para evitar posibles pérdidas de memoria y permitir la recolección de basuraonScroll() por primera vez, especialmente si el usuario puede llegar a la página con una posición de desplazamiento en caché (es decir, el usuario no comienza desde la parte superior de la página)Con todos estos puntos en mente, aquí hay una versión mejorada de su código:
const [image, setImage] = useState('images/Passport Stock Photo.svg'); useEffect(() => { const onScroll = () => { setImage(window.scrollY > 100 ? 'images/ccpLogo.svg' : 'images/Passport Stock Photo.svg'); }; // Note: Listen to scroll event window.addEventListener('scroll', onScroll); // Optional: Handle scenario where user arrives at a pre-scrolled position (non-zero scrollY on load) onScroll(); // Note: Clean up to avoid memory leaks return () => { window.removeEventListener('scroll', onScroll); }; }, []); return ( <img src={image} alt="Info-Background" /> );Básicamente necesita usar useRef , que podría ser mejor para el rendimiento. Recuerde que useState desencadenará una nueva representación. Pero, de hecho, solo necesita actualizar la fuente de su imagen. Yo usaría algo como esto.
import { useCallback, useEffect, useRef } from "react"; import "./styles.css"; export default function App() { const imgRef = useRef(); const middleRef = useRef(); const onScroll = useCallback(() => { if (imgRef != null) { var scrollValue = window.scrollY; if (scrollValue > 100) { imgRef.current.src = "https://picsum.photos/id/237/200/300"; } else { imgRef.current.src = "https://picsum.photos/seed/picsum/200/300"; } console.log(scrollValue); } }, []); useEffect(() => { window.addEventListener("scroll", onScroll, true); return () => { window.removeEventListener("scroll", onScroll, true); }; }, [onScroll]); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <div ref={middleRef} className="middle" /> <img ref={imgRef} src={"https://picsum.photos/seed/picsum/200/300"} alt="Info-Background" /> </div> ); }Aqui esta el link. Puedes comprobarlo trabajando en codesandbox. https://codesandbox.io/s/ecstatic-https-hzi5n