如何通过React js中的Link组件传递对象

时间:2018-10-10 02:44:58

标签: reactjs

以下代码适用于我的图像滑块组件。在组件的中间,我放置了<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>
  );
};

0 个答案:

没有答案