插入 React Link 组件并将其作为 prop 传递

Question

我正在尝试将 link 传递给一个组件，在该组件中，单击它应该会重定向到特定的路由。但在这里我可以看到 Link 插值为 [object Object] .

有人可以帮我吗

 <CommonMessage description={`Click here ${<Link to="/signin">here</Link>} to login`} />

我得到的输出是：

点击[object对象]登录

Answer 1

那是因为 React 组件只是对象，当你把它们放在一个字符串中时 Javascript 对它们执行 toString() 并且你得到你现在得到的结果。

我建议你像这样将 description prop 作为 React 组件传递：

<CommonMessage 
  description={
    <>
      Click here <Link to="/signin">here</Link> to login
    </>
  }
/>

这给了你一个很好的 API 因为组件的用户现在决定要呈现的内容。