如何遍历图像数组并在React组件中渲染它们？
10号
我的react应用程序中有5张图像的列表，我想无限循环地循环浏览。我基本上想对这5帧进行动画处理，以使长条灯看起来像是不断移动的灯光。
因此，在每个图像中移动的点看起来都好像在移动。
我目前正在导入每个图像，并将其呈现在react-bootstrapsImage组件中。我知道我的方法可能在下面。我将如何准确地做到这一点？
我的尝试
//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()} />
雷纳尔多·巴拉杰（Renaldo Balaj）
我将不再使用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]} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
遍历组件数组并渲染它们？
- 2
在React中渲染图像数组
- 3
通过数组映射并在 React 中渲染指定的组件
- 4
如何在反应原生中基于数组内的图像uri渲染图像组件
- 5
如何避免在React中重新渲染组件？
- 6
如何在React中渲染递归组件？
- 7
在 React 中单击组件时，如何渲染数组中的特定对象？
- 8
C# - 如何将文件夹中的图像添加到数组并在列表视图中显示它们？
- 9
如何从 React 中渲染方法之外的函数渲染组件？
- 10
组件未按React Native中的预期渲染图像
- 11
如何将对象从数组渲染到React中的另一个组件？
- 12
在数组中，在 React 组件的状态中渲染对象的属性
- 13
如何构建动态数组并在AutoIt中循环遍历？
- 14
如何创建数组并在FullCalendar中循环遍历？
- 15
如何遍历数组并在 JSX 中显示数据列表？
- 16
在React组件渲染中初始化数组（就性能而言）
- 17
将Redux存储中的对象数组渲染为React组件
- 18
React.js：从对象数组中渲染组件
- 19
当使用React Router在ReactJS中渲染参数组件时，如何避免不必要地重新渲染HOC组件
- 20
Java流-如何遍历列表，显示要素并在同一行中收集它们
- 21
我如何遍历mysql中的值并在使用时使用它们
- 22
如何为数组中的每个对象渲染组件？
- 23
将图像标签数组存储在html数据属性中，并在单击时检索它们
- 24
在 Meteor+React 中，如何在父 React 组件中渲染子 React 组件？
- 25
在DOM中渲染React组件
- 26
在React中渲染组件实例
- 27
在 React 组件中渲染数学
- 28
映射组件和字符串的两个数组，并在一个组件中渲染
- 29
如何使用React Native将图像拆分成小部分并在单击时显示它们？
我来说两句