如何在反应中从数组中映射出预加载的图像?
Posted
技术标签:
【中文标题】如何在反应中从数组中映射出预加载的图像?【英文标题】:How to map out preloaded images from an array in react? 【发布时间】:2021-02-05 10:24:04 【问题描述】:我正在尝试为图像轮播预加载一些图像并将它们存储在数组中。到目前为止,我似乎一切正常,但当我尝试将数组中的图像映射到 JSX 时出现错误。
错误:对象作为 React 子对象无效(找到:[object htmlImageElement])。如果您打算渲染一组子项,请改用数组
谁能告诉我为什么?
作为后续问题,我的 setInterval(将用于旋转图像)没有启动,我不知道为什么,因此非常感谢任何帮助。
import React, useEffect, useState from 'react'
import CSSTransition from 'react-transition-group'
import ImageCarouselContainer, ImageCarouselSlide from './imagecarousel.styles'
const images = [
'https://images.unsplash.com/photo-1588392382834-a891154bca4d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2555&q=80',
'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2551&q=80',
'https://images.unsplash.com/photo-1470813740244-df37b8c1edcb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2551&q=80'
]
const ImageCarousel = () =>
const [activeImage, setActiveImage] = useState(1);
const [imagesArr, setImagesArr] = useState([])
useEffect(() =>
let loadedImages = []
images.forEach(el =>
let img = new Image()
img.onload = () =>
loadedImages.push(img);
img.src = el
)
setImagesArr(loadedImages);
const counter = () =>
if(activeImage < imagesArr.length)
setActiveImage(activeImage + 1)
else
setActiveImage(0)
const interval = setInterval(counter, 1000)
return () =>
clearInterval(interval);
, [])
return (
<ImageCarouselContainer>
imagesArr &&
imagesArr.map((el, idx) => (
<CSSTransition
classNames='image'
timeout=1000
key=idx
in=activeImage === idx ? true : false
unmountOnExit
>
<ImageCarouselSlide
>
el
</ImageCarouselSlide>
</CSSTransition>
))
</ImageCarouselContainer>
)
export default ImageCarousel
【问题讨论】:
能把错误信息放上去吗? 对不起,它的:错误:对象作为 React 子级无效(找到:[object HTMLImageElement])。如果您打算渲染一组子项,请改用数组。 尝试将其包裹在 Fragment 上el
是一个 Image
对象。那么,el
可能会抛出错误?
【参考方案1】:
您尝试将纯 html 对象而不是对渲染功能做出反应的组件。所以它没有道具等......
改变
images.forEach(el =>
let img = new Image()
img.onload = () =>
loadedImages.push(img);
img.src = el
到
images.forEach(el =>
let img = new Image()
img.onload = () =>
loadedImages.push(<img src=el>);
img.src = el
【讨论】:
以上是关于如何在反应中从数组中映射出预加载的图像?的主要内容,如果未能解决你的问题,请参考以下文章