如何循环图像数组并将它们呈现在 React 的组件中？答案

【问题标题】：How to loop over images array and render them in a component for React?如何循环图像数组并将它们呈现在 React 的组件中？
【发布时间】：2020-03-25 19:34:21
【问题描述】：

我的 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()} />

【问题讨论】：

标签： javascript reactjs image loops

【解决方案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]} />

【讨论】：

这就是你如何以“反应”的方式做到这一点
css 会更好，但我想要一种反应方式。工作就像一个魅力，谢谢大家！
顺便说一句，循环浏览这样的图像对网站膨胀有任何负面影响吗？很好奇你是否知道。
我建议创建一个 gif，然后让它顺其自然

【解决方案2】：

一个更简单的方法可能是用 CSS 来做到这一点：

.lightbox {
  border: solid 3px black;
  display: inline-flex;
  padding: 10px 20px;
  justify-content: space-between;
  width: 200px;
  position: relative;
  margin-left: 24px;
  align-items: center;
}

.light {
  border: solid 3px black;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  animation: blink 5s linear infinite;
}

.light:nth-child(2) {
  animation-delay: 1s
}

.light:nth-child(3) {
  animation-delay: 2s
}

.light:nth-child(4) {
  animation-delay: 3s
}

.light:nth-child(5) {
  animation-delay: 4s
}

@keyframes blink {
  0% {
    background-color: orangered;
  }
  19% {
    background-color: orangered;
  }
  20% {
    background-color: transparent;
  }
  100% {
    background-color: transparent;
  }
}

.lightbox::before,
.lightbox::after {
  content: "";
  border: solid 1.5px black;
  width: 20px;
  height: 0;
  position: absolute;
}

.lightbox::before {
  left: -24px;
}

.lightbox::after {
  right: -24px;
}

<div class="lightbox">
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
  <div class="light"></div>
</div>

【讨论】：