[英]How do I map values for custom thumbnails using react-responsive-carousel and react-image-magnifiers?
我目前正在尝试使用 react-responsive-carousel 和 react-image-magnifiers 产品查看器。 它基于https://github.com/AlexTechNoir/Next.js-e-commerce-online-store#nextjs-e-commerce-store的示例。 我似乎无法解决的问题是如何 map 自定义缩略图正确显示。 当我对数组进行硬编码时,它工作正常,但是当我尝试动态 map 时,所有缩略图都呈现在同一个数组中(幻灯片图像和放大镜工作正常。)我正在使用 Next js v10.0.4,Node v14 .3.0 这是我的代码:
ProductSlider.js
import { Carousel } from 'react-responsive-carousel'
import { SideBySideMagnifier } from 'react-image-magnifiers'
import { API_URL } from '../../utils/urls'
import {fromImageToUrl} from '../../utils/urls'
//Map Image Slider Function
export default function ProductSlider({ product }) {
const images = product.productImages
const renderCustomThumbs =() => {
const siteUrl = API_URL
const thumbList = images.map((product, index) =>
<picture key={index}>
<source data-srcSet={`${siteUrl}${product.url}`} type="image/jpg" />
<img
key={product._id}
src= {`${siteUrl}${product.url}`}
alt={product.alternativeText}
height="70"
/>
</picture>,
)
return [
[thumbList]
]
}
return (
<Carousel
showArrows={true}
showStatus={true}
showIndicators={false}
showThumbs={true}
autoPlay={false}
transitionTime={500}
swipeable={false}
emulateTouch={true}
renderThumbs={renderCustomThumbs}
>
{images.map((productImages, index) => (
<div key ={index}>
<SideBySideMagnifier
key={index}
imageSrc={fromImageToUrl(productImages)}
alwaysInPlace={true}
fillAvailableSpace={true}
/>
</div>
))}
)
</Carousel>
)
}
这是有效的硬编码版本(我也通过插入导入数据对其进行了测试,即 <source data-srcSet={ ${siteUrl}${product[0].url}
} type="image/jpg" / > 并且有效):
import { Carousel } from 'react-responsive-carousel'
import { SideBySideMagnifier } from 'react-image-magnifiers'
import "react-responsive-carousel/lib/styles/carousel.min.css";
export default function ProductSlider() {
const renderCustomThumbs = () => {
return [
<picture>
<source data-srcSet="/img/products/0/01.jpg" type="image/jpg" />
<img
key="01"
src="/img/products/0/01.jpg"
alt="First Thumbnail"
height="70"
/>
</picture>,
<picture>
<source data-srcSet="/img/products/0/02.jpg" type="image/jpg" />
<img
key="02"
src="/img/products/0/02.jpg"
alt="Second Thumbnail"
height="70"
/>
</picture>,
<picture>
<source data-srcSet="/img/products/0/03.jpg" type="image/jpg" />
<img
key="03"
src="/img/products/0/03.jpg"
alt="Third Thumbnail"
height="70"
/>
</picture>,
]
}
return (
<DivProductPage>
<Carousel
showArrows={false}
showStatus={true}
showIndicators={false}
showThumbs={true}
autoPlay={false}
transitionTime={500}
swipeable={false}
emulateTouch={true}
renderThumbs={renderCustomThumbs}
>
<div>
<SideBySideMagnifier
imageSrc="/img/products/0/01.jpg"
imageAlt="First Slide"
alwaysInPlace={true}
fillAvailableSpace={true}
/>
</div>
<div>
<SideBySideMagnifier
imageSrc="/img/products/0/02.jpg"
imageAlt="Second Slide"
alwaysInPlace={true}
fillAvailableSpace={true}
/>
</div>
<div>
<SideBySideMagnifier
imageSrc="/img/products/0/03.jpg"
imageAlt="Third Slide"
alwaysInPlace={true}
fillAvailableSpace={true}
/>
</div>
)
</Carousel>
</DivProductPage>
)
}
这是 DOM 从开发者控制台返回的内容 [返回的 Dom map 没有按预期工作][1] 它应该是这样的:[从硬编码版本返回的 DOM][2]
您给我的任何帮助将不胜感激,我被困住了:[1]: https://i.stack.imgur.com/JwKtn.png [2]: https://i.stack.imgur.com/ abEfA.png
在 renderCustomThumbs function 的 return 语句中,我在数组中调用了一个数组,这导致拇指在一个数组中呈现。 修复是从返回语句中删除 arrays []。 工作 function 如下所示:
const renderCustomThumbs =() => {
const siteUrl = API_URL
const thumbList = images.map((product, index) =>
<picture key={index}>
<source data-srcSet={`${siteUrl}${product.url}`} type="image/jpg" />
<img
key={product._id}
src= {`${siteUrl}${product.url}`}
alt={product.alternativeText}
height="70"
/>
</picture>
)
return(thumbList)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.