如何使用 react-responsive-carousel 和 react-image-magnifiers 映射自定义缩略图的值?
Posted
技术标签:
【中文标题】如何使用 react-responsive-carousel 和 react-image-magnifiers 映射自定义缩略图的值?【英文标题】:How do I map values for custom thumbnails using react-responsive-carousel and react-image-magnifiers? 【发布时间】:2021-05-25 05:23:55 【问题描述】:我目前正在尝试使用 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
/>
</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>
)
这是有效的硬编码版本(我也通过插入导入数据对其进行了测试,即
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"
/>
</picture>,
<picture>
<source data-srcSet="/img/products/0/02.jpg" type="image/jpg" />
<img
key="02"
src="/img/products/0/02.jpg"
/>
</picture>,
<picture>
<source data-srcSet="/img/products/0/03.jpg" type="image/jpg" />
<img
key="03"
src="/img/products/0/03.jpg"
/>
</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
【问题讨论】:
【参考方案1】:在 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
/>
</picture>
)
return(thumbList)
【讨论】:
以上是关于如何使用 react-responsive-carousel 和 react-image-magnifiers 映射自定义缩略图的值?的主要内容,如果未能解决你的问题,请参考以下文章
如何在自动布局中使用约束标识符以及如何使用标识符更改约束? [迅速]
如何使用 AngularJS 的 ng-model 创建一个数组以及如何使用 jquery 提交?