在 React 中单击 Carousel 图像时如何重定向？

问题描述

在 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

解决方法

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

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)}/>

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

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

    {
      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>```

从 <a> 生成的 <Link> 标签就在那里，它只是大约 20 像素高。

我不确定轮播生成什么 css，但我建议深入研究，看看您是否可以绝对定位 <a> 标签并采用 100% 的宽度和高度 - 当然具有相对位置的父级。

理想情况下，用 img 包装您的 Link 元素应该有效，但在检查 css 时，我注意到您的 Carousal css，特别是 .carousal img 选择器具有规则pointer-events:none，这就是为什么您在将鼠标悬停在 img 上时没有像通常那样看到手形光标的原因。

因此，您可以在 div 和 Link 之间再添加一个类似于 img 的层，这样就可以了。

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

javascript reactjs reactjs