如何使用 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>

 )
 

这是有效的硬编码版本(我也通过插入导入数据对其进行了测试,即 $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"
        
        
      />
    </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 提交?

如何使用laravel保存所有行数据每个行名或相等

如何使用 Math.Net 连接矩阵。如何使用 Math.Net 调用特定的行或列?

WSARecv 如何使用 lpOverlapped?如何手动发出事件信号?