javascript - 如何遍历图像数组并将它们呈现在 React 的组件中？

Question

我的 React 应用程序中有一个包含 5 张图像的列表，我想在无限循环 中循环显示这些图像。我基本上想为这 5 个帧制作动画，使灯条看起来像一个不断移动的灯。

所以每幅图像中移动的点看起来就像在移动。

我目前正在导入每个图像并在 react-bootstraps Image 组件中渲染它。我知道我的方法可能不在下面。我将如何准确地做到这一点？

我的尝试

//images
import bar1 from "../assets/bar1.png";
import bar2 from "../assets/bar2.png";
import bar3 from "../assets/bar3.png";
import bar4 from "../assets/bar4.png";
import bar5 from "../assets/bar5.png";

//my state
  state = {
    bars:[bar1,bar2,bar3,bar4,bar5]
  };

//function to cycle (this needs to run infinitely)
 cycleBars =()=> {
    let finalBar = this.state.bars0]; 
    //return this.state.bars[0];
    this.state.bars.map(e=>{
      finalBar = e;
    })
    return finalBar;
  }


//return from my component

<Image src={this.cycleBars()} />

Answer 1

我会选择 CSS 动画。以下是 React 中的解决方案:

 state = {
    bars:[bar1,bar2,bar3,bar4,bar5],
    activeImageIndex: 0
 };

 componentDidMount(){
   setInterval(()=>{
     let newActiveIndex = this.state.activeImageIndex===4 ? 0 : this.state.activeImageIndex+1     
     this.setState({
        activeImageIndex: newActiveIndex
     })
   }, 1000);


 }

 <Image src={this.state.bars[activeImageIndex]} />