Question

我正在使用反应力气,显示不同的商品,我希望在座标上的每一形象都能被点击,把我带上自己在第三方网站上的产品页。我从第三方网站APIC(现在我刚刚使用假数据)检索了商品信息,我应该从APIC中获取这一功能。我的守则是:

export default function MerchPreview() {
  const [gallery, setGallery] = useState([])

  useEffect(() => {
    const formattedProducts = testMerchData.results.map(product => (
      {
        originalTitle: product.name,
        description: product.description,
        original: product.images[0].url,
        thumbnail: product.images[0].url,
        slug: product.slug
      }
    ))

    setGallery(formattedProducts)
  }, [])

  return (
    <div className= MerchPreview >
      <ProductGallery 
        items={gallery}
      />
    </div>
  )
}

页: 1 无论过去还是现在,但我的不耐烦使我无法知道哪里甚至开始。 ...... 项目看好我可能需要做些什么,但我需要做些什么。很难再接下去,我不知道如何执行。我认为,我试图做些什么可能是多余的。希望得到任何帮助。

Answer 1

这里,是以下几个方面的解决办法: https://codesand Box.io/p/sand Box/react-image-gallery-forked-k3s4v2?file=%2Fs%2rcages.js%2A412%

正如你所提到的那样,项目很可能是把你的形象描绘成一个标签的最容易的方法。然而,如果你不希望自行开张,而且你想离开你可以加点击的事件。不幸的是,没有发生每个图像的立点事件。相反,在盖拉周围 wrap一片,最接近找到形象。见下文。

 <div className= MerchPreview  onClick={handleGalleryClick}>
      <ProductGallery 
        items={gallery}
      />
    </div>

and here is the on click.

 const handleGalleryClick = (event) => {
    // Find the index of the clicked item
    let target = event.target;
    while (
      target != null &&
      !target.classList.contains("image-gallery-image")
    ) {
      target = target.parentElement;
    }
    if (target) {
      const slides = document.querySelectorAll(".image-gallery-slide");
      const index = Array.from(slides).findIndex((slide) =>
        slide.contains(target)
      );
      if (index !== -1) {
        const url = gallery[index].productPageUrl;
        if (url) {
          window.open(url, "_blank");
        }
      }
    }
  };

友情链接