He estado luchando contra este problema. Pude hacer esto usando Javascript pero no pude implementarlo en React. Este es el desafío.
En JS, usé este código:
images.forEach((img, idx) => { img.style.backgroundImage = `url(./images/${idx + 1}.jpg)`; });--para iterar sobre la carpeta 'imágenes' y mostrar todas las imágenes en secuencia. La idea era desplazar las imágenes horizontalmente (código JS completo a continuación al final de esta descripción). Intenté hacer lo mismo en React js pero no pude encontrar una salida. Probé el mismo código en JSX pero no funcionó. Necesitaba una sola línea de código como JS para iterar y mostrar todas las imágenes en React js. Con mucho gusto agradecería su solución.
Este es el código JS completo:
var images = [...document.querySelectorAll(".img")]; var slider = document.querySelector(".slider"); var sliderWidth; var imageWidth; var current = 0; var target = 0; var ease = 0.05; images.forEach((img, idx) => { img.style.backgroundImage = `url(./images/${idx + 1}.jpg)`; }); function lerp(start, end, t) { return start * (1 - t) + end * t; } function setTransform(el, transform) { el.style.transform = transform; } function init() { sliderWidth = slider.getBoundingClientRect().width; imageWidth = sliderWidth / images.length; document.body.style.height = `${ sliderWidth - (window.innerWidth - window.innerHeight) }px`; } window.addEventListener("resize", init); function animate() { current = parseFloat(lerp(current, target, ease)).toFixed(2); target = window.scrollY; setTransform(slider, `translateX(-${current}px)`); animateImages(); requestAnimationFrame(animate); } function animateImages() { var ratio = current / imageWidth; var intersectionRatioValue; images.forEach((image, idx) => { intersectionRatioValue = ratio - idx * 0.7; setTransform(image, `translateX(${intersectionRatioValue * 70}px)`); }); } init(); animate();¿Cómo puedo recorrer la carpeta de imágenes y mostrar todas las imágenes usando React js?
Sin entrar demasiado en su código, creo que lo que está buscando es la función de mapa y una estructura como esta:
const Images = ({images}) => { const imageComponents = images.map((img, i) => { return ( <div key={i}> <img src={img} alt=`Image number ${i}` /> </div> ) }); return( <div> {images} <div> ) } Básicamente, use la función de mapa en su matriz y devuelva un componente de cada iteración (recuerde incluir una key única) y luego devuelva esa matriz de componentes como parte de su componente principal (en mi ejemplo, Images . Debería poder abrir gran parte de su código js en el mismo componente o en un padre de Images , según la funcionalidad.