javascript - 如何使用 react-responsive-carousel 和 react-image-magnifiers 映射自定义缩略图的值?
问题描述
我目前正在尝试使用 react-responsive-carousel 和 react-image-magnifiers 产品查看器。它基于https://github.com/AlexTechNoir/Next.js-e-commerce-online-store#nextjs-e-commerce-store中的一个示例。我似乎无法解决的问题是如何映射自定义缩略图以正确显示。当我对数组进行硬编码时,它工作正常,但是当我尝试动态映射时,所有缩略图都呈现在同一个数组中(幻灯片图像和放大镜工作正常。)我正在使用 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 映射没有按预期工作][1] 它应该是这样的:[从硬编码版本返回的 DOM][2]
您给我的任何帮助将不胜感激,我被困住了![1]:https ://i.stack.imgur.com/JwKtn.png [2]:https ://i.stack.imgur.com/abEfA.png
解决方案
在 renderCustomThumbs 函数的返回语句中,我在一个数组中调用了一个数组,这导致拇指在一个数组中呈现。解决方法是从 return 语句中删除数组 []。工作函数如下所示:
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)
推荐阅读
- aws-lambda - 在来自 Lambda 的 Amazon lex 响应中呈现 HTML
- javascript - [变量].onclick = function () 未执行,控制台中没有错误
- mysql - 全部:无法获得代表
- android - 使 LinearLayout 可点击,但仅在其填充而不是子视图上获得响应
- database - 如何在不涉足源代码的情况下找到数据库存储格式规范?
- svm - RBF内核的最佳sigma?
- c++ - 在 Chromium 中构建 Chrome 扩展的标准方法
- jquery - 防止移动设备上的 jQuery ContextMenu 子菜单项大小增加
- python - jupyter 中的 Python 脚本永远运行
- firebase - firebase deploy 给出“路径”错误