如何通过锚标签传递道具？答案

【问题标题】：How can I pass props through an anchor tag?如何通过锚标签传递道具？
【发布时间】：2020-11-16 13:19:48
【问题描述】：

我想知道，如何将 props 传递给其他组件？类似于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 一样访问它

【问题讨论】：

您所做的似乎是正确的。 top 包含什么？您面临什么问题？
在通过该 href 指向的组件上。当我尝试 console.log(props.objectid) 它显示 undefined
图片不能有src={top.image-url}。您需要使用src={top["image-url"]} 否则它将不起作用。看看我的回答@zinx

标签： reactjs react-redux react-router

【解决方案1】：

对于图像，您不能拥有src={top.image-url}。你需要使用src={top["image-url"]}，否则它不起作用。

如果您使用的是React Router，请为此使用React Router: Link 组件。

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

这里也可以设置Link的状态，这样其他页面也可以访问到，比如这是从哪个页面来的等等。

【讨论】：

感谢您的回复，但我对 img 标签没有任何问题，因为 top 来自 JSON 响应，其对象为 image-url
@zinx 你必须使用top["image-url"] 而不是top.image-url。这是我正在谈论的另一个问题。这样，在新的页面中，点击objectId就可以得到top.id的值。
如果我尝试使用 LINK 我会收到新错误 ...让我解决这个问题然后我会接受你的回答如果它解决了我当前的问题
谢谢，现在我可以在渲染组件中获取objectId，并且我还按照您的建议更改了img src top["image-url"] 再次感谢您。

【解决方案2】：

最好用react-routerLink

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

【讨论】：

你为什么要用对象 id 做这样的事情
图片不能有src={top.image-url}。您需要使用src={top["image-url"]} 否则它将不起作用。看看我的回答@zinx