如何在React中点击Carousel图片时进行重定向？

Question

在一个React项目中，我已经安装了'react-responsive-carousel' npm包中的Carousel。我希望在单击其中滑动的图像时重定向到某个组件。应该如何实现？

const data = [
    {
      img:
        "https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
    },
    {
      img:
        "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg"
    },
    {
      img:
        "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512__340.jpg"
    },
    {
      img:
        "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunflower-1508785046.jpg"
    }
  ];

<Carousel autoPlay infiniteLoop showArrows={false} showThumbs={false}>
          {data.map((item) => (
            <Link to="/images">
              <img src={item.img} />
            </Link>
          ))}
</Carousel>

以下是 CodeSandbox 的链接，以便更好地理解。 CodeSandbox 链接：https://codesandbox.io/s/sad-sea-1ptl3

- Pranav

Answer 1

将您的目标URL添加到数据对象中，如下所示：

const data = [
    {
      img:
        "https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
      targetURL: "/posts/blahblah?id=10100110",
    },
       ......]

然后在图片标签中添加onChange属性，并使用useHistory更改您的路由，例如：

const history = useHistory();

<img src={item.img} onChange={() => history.push(item.targetURL)}/>

- PS-PARSA

Answer 2

    {
      id:1,
      img:
        "https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
    },
    {
      id:2,
      img:
        "https://cdn.pixabay.com/photo/2015/04/19/08/32/marguerite-729510__340.jpg"
    },
    {
      id:3,
      img:
        "https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512__340.jpg"
    },
    {
      id:4,
      img:
        "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/sunflower-1508785046.jpg"
    }
  ];

<Carousel autoPlay infiniteLoop showArrows={false} showThumbs={false}>
          {data.map((item) => (
            <Link to=`/images/${item.id}`>
              //change <Route /> in App.js accordingly
              <img src={item.img} />
            </Link>
          ))}
</Carousel>```

- Zahir Masoodi

---

如果您不介意的话，您能否在我的 CodesandBox 上进行更改？ - Pranav

Answer 3

只需将Link替换为div并在此标签上使用onClick()

{data.map((item, index) => (
            <div
              key={index}
              onClick={() => window.open("https://javascript.info/")}
            >
              <img src={item.img} alt="img" />
            </div>
          ))}

- danhuong

---

好的...我们不能使用<Link/>吗？因为那会更有益。 - Pranav

Answer 4

<Link> 生成的<a>标签存在，只是高度约为20像素。

我不确定轮播图生成的CSS代码，但我建议仔细研究一下，看看能否将<a>标签绝对定位，并占据100%的宽度和高度 - 当然，要相对于具有相对位置的父元素。

- Jack

Answer 5

理想情况下，使用Link包装您的img元素应该可以工作，但在检查css时，我注意到您的Carousal css，特别是.carousal img选择器具有规则pointer-events:none，这就是为什么当您悬停在img上时没有看到手指光标的原因。

所以您可以在Link和img之间添加一个像div那样的图层，这将起作用。

或者您可以覆盖您正在使用的Carousal库的css。

- Lakshya Thakur