如何遍历图像数组并在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,bar6]
  };

//function to cycle (this needs to run infinately)
 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]} />