如何使用react-responsive carousel和react-image-carousel为自定义缩略图映射值？

Question

我目前正在尝试使用react-responsive carousel和react-image放大镜制作查看器。它基于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>

 )
 }

以下是可以工作的硬编码版本(我已经通过插入导入数据进行了测试，例如${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映射没有按预期工作这是它应该的样子:从硬编码版本返回的DOM

你给我的任何帮助都会非常感谢，我被卡住了！1：https://i.stack.imgur.com/JwKtn.png 2：https://i.stack.imgur.com/abEfA.png

Answer 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}
      height="70"
    />
    
  </picture>
  )

 
return(thumbList)