在 React Slick Slider 内的每个图像上添加模态弹出窗口答案

【问题标题】：Adding Modal Popup on Each Image Inside React Slick Slider在 React Slick Slider 内的每个图像上添加模态弹出窗口
【发布时间】：2021-12-02 13:21:53
【问题描述】：

我想每次在我的 react-slick 的滑块上单击图像时都显示模态弹出窗口，但完全不知道该怎么做。我的滑块正在从数组接收图像

我想为每张图片分配唯一的 onClick 功能

示例：onClick={berryModal}、onClick={melonModal}、onClick={grapeModal}

到目前为止我尝试了什么，我不知道如何为每张图片分配唯一的 onClick 功能：

  const [showModal, setShowModal] = useState(false)

  const openModal = () => {
    setShowModal(prev => !prev)
  }

这是我的 react-slick 的滑块设置：

    infinite: true,
    slidesToShow: 4,
    centerMode: true,
    centerPadding: 0,
    dots: true,
    autoplay: true,
    speed: 1000,
    autoplaySpeed: 2500,
    cssEase: "linear",
    beforeChange: (current, next) => setImageIndex(next),
    nextArrow: <NextArrow />,
    prevArrow: <PrevArrow />

这就是我在页面上显示我的 react-slick 滑块的方式：

return (
      <Slider {...settings}>
        {images.map((img, idx) => (
          <div className={idx === imageIndex ? "slide AutoPlay" : "slide"}>
            <img src={img} alt={img} onClick={"imagename"+modal}/>
            //i wan't to know the proper way to give onclick function name
          </div>
        ))}
      </Slider>
  );
}

【问题讨论】：

标签： reactjs react-slick

【解决方案1】：

您可以在这里做的是，在此 Slider 之外但在同一个组件中定义一个通用模式的渲染。

您可以使用当前滑块索引中图像的 URL 在 Modal 中显示图像。

return(
    <>
      <Modal><img src={currentSliderIndexUrl} /></Modal>
      <Slider> {your images here} </Slider>
    <>
)

【讨论】：