在字符串中嵌入 React 路由器链接答案

【问题标题】：Embed React router link inside a string在字符串中嵌入 React 路由器链接
【发布时间】：2020-04-30 15:06:45
【问题描述】：

为什么这会返回 [object.OBJECT] 而不是链接的 URL？

const floors = [
  {
    name: <Link to='/floor/ll-floor'>Lower Level</Link>,
    callNumbers: 'A, C, G-GV, H-HX, J-K-L, Q-TX (except TR), U-Z',
    servicePoints:
      'Reserves, Microtext, Engineering Library Collection, and Media Desk',
  },
  {
    name: <Link to='/floor/1st-floor'>First Floor</Link>,
    callNumbers: ' ',
    servicePoints:
      'Circulation, ' + (<Link to='/ask-us-desk' > Ask Us Desk</Link>) + ' University Archives and Rare Books & Special Collections Reading Room',
  },

这是我用作数据文件来填充表的对象。我想将数据文件中的一些项目链接到字符串中的不同目的地。 “servicePoints”用于在该表的列中填充数据。

【问题讨论】：

您在 UI 或控制台中看到 [object.OBJECT]？
我在 UI 中看到了它
你会想要包含更多的周边代码。需要了解它是否嵌入在其他 JSX 或 vanilla JS 中。尝试包含一个完整的 JSX 表达式。
因为链接是一个反应组件，而不是一个字符串。您正在尝试将字符串与 typeof 对象的组件连接起来。尝试使用 {} 而不是 () 将其包装为表达式。
Will：我添加了更多代码，以便您更好地了解上下文。布赖恩：谢谢你的建议。我试过了，但它打破了页面。

标签： arrays string arraylist react-router jsx

【解决方案1】：

我找到了另一种方法，只需将单元格数据制作成一个数组，而不是尝试连接一个字符串：

callNumbers: ' ',
servicePoints: [<Link to='/ask-us-desk'>Ask Us Desk</Link>, ', Circulation, University Archives and Rare Books & Special Collections Reading Room'],

【讨论】：