以下代码适用于我的图像滑块组件。在组件的中间,我放置了<Link>
组件以放置带有/detail/
url的链接。当用户单击链接时,他们将移至商店的详细信息页面。
storeList
道具具有存储对象。循环时,我想通过<Link>
组件传递商店对象,以便可以在详细信息页面中显示商店的信息和图像。我可以使用普通的组件来做到这一点,但是我不知道如何通过<Link>
组件来做到这一点。有人可以帮我吗?
顺便说一句,我是否试图以正确的方式实现这一目标?
Slider.jsx
const Slider = props => {
const { classes, storeList } = props;
return (
<div>
{storeList &&
storeList.map(store => {
return (
<Card className={classes.card} key={store.id}>
<CardBody>
<Carousel {...settings} className={classes.carousel}>
{store.image_set.map(image => {
return (
<div key={image.id}>
<Link to="/detail/"> <---- Need to pass object here
<img
src={image.image}
alt="product"
className="slick-image"
onClick={this._handleDetail}
/>
</Link>
</div>
);
})}
</Carousel>
</CardBody>
</Card>
);
})}
</div>
);
};