Javascript 在React中单击旋转木马图像时如何重定向？

在React项目中，我已从“React responsive Carousel”npm包安装了转盘。在这方面，我想重定向到一些组件上的图像滑动点击它。怎么可能呢

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>

const数据=[
{
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"
}
];
{data.map（（项）=>(
))}

下面是CodeSandbox的链接，以提高清晰度

---

CodeSandbox链接：

只需将

Link

替换为

div

，并在此标记上使用

onClick（）

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

{data.map（（项目，索引）=>(
窗口打开（“https://javascript.info/")}
>
))}

将目标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)}/>

const history=useHistory（）；
history.push（item.targetURL）}/>

{
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"
}
];
{data.map（（项）=>(
//App.js中的相应更改
))}
```
从
生成的
标记在那里，只是它大约有20px高

我不确定旋转木马生成的css是什么，但我建议深入研究一下，看看你是否可以绝对定位
标记，并将100%的宽度和高度带到一个当然相对位置的父级。
理想情况下，用
链接包装
img
元素应该有效，但要检查css，我注意到您的
Carousal
css，特别是
.Carousal img
选择器具有规则
指针事件：none
，这就是为什么您在将鼠标悬停在
img
上时不会看到手光标的原因

因此，您可以在
Link
和
img
之间添加一个类似于
div
的层，这将起作用

或者您可以覆盖正在使用的
Carousal
库的css。
OK。。。我们不能用吗？因为如果你不介意的话，那将是非常有益的。你能在我的代码沙盒中进行更改吗
    {
      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>```