时间戳

首页 > 解决方案 > 如何通过锚标签传递道具？

reactjs - 如何通过锚标签传递道具？

问题描述

我想知道，如何将道具传递给其他组件？就像objectid={top.id}通过锚标签一样。

{lists.map((top) => {
       return (
            <li key={id}>
               <a href={'/object/'+ slugify(top.title) } objectid={top.id}>
                 <img alt={top.title} src={top.image-url}/>
               </a>
            </li>
       )})
}

我想将 {top.id} 传递给组件，该组件将在从给定的 href 转到 url 时呈现，我可以像这样访问它props.objectid

标签： reactjsreact-reduxreact-router

解决方案

For the image, you cannot have src={top.image-url}. You need to use src={top["image-url"]} else it won't work.

And if you're using React Router, please use the React Router: Link component for this.

<Link
  to={{
    pathname: `/object/${slugify(top.title)}`,
    state: { objectId: top.id }
  }}
>
  <img alt={top.title} src={top["image-url"]} />
</Link>

Here you can also set the Link state, so that it can be accessible in the other page too, so as from which page this has come from, etc.

推荐阅读