MaterialTable：在字段属性上显示 html 标签

Question

我正在使用 MaterialTable 库为我的 react 应用程序呈现表格网格。

来源：Material Table Github

执行 API 请求后，服务器返回一个对象 一个这样的 HTML 标记：

  {
    "name": "Test",
    "link": "https://google.com",
    "httpLink": "<a href='https://google.com'>google</a>"
  }

在客户端，我有渲染此数据的组件，我想显示渲染的 HTML 标记或将链接包装在 HTML 标记中并仅显示中间的单词。

            columns={[
              { title: 'Name', field: 'name' },
              { title: 'LinkString', field: 'link'},
              { title: 'Link', field: 'httpLink'},         
            ]}

我尝试将链接字段包装在标签上，但这不起作用，我无法在页面上显示任何内容。

httpLink 将显示一个字符串，而不是呈现标签并显示单词 google。

想要的输出：

名称 |链接

测试 |谷歌

输出：

名称 |链接

测试 | <a href='https://google.com'>google</a>

我查看了文档，但找不到任何关于此事的内容。

Material Table Docs

谁能帮帮我？

Answer 1

您可以使用自定义渲染功能

columns={[
              { title: 'Name', field: 'name' },
              { title: 'LinkString', field: 'link'},
              { title: 'Link', field: 'httpLink', render: rowData => <a href={rowData.link}>{rowData.name}</a>},         
            ]}

Answer 2

要在 React 中将 String 标签转换为 Real DOM，试试这个

columns={[
          { title: 'Name', field: 'name' },
          { title: 'LinkString', field: 'link'},
          { title: 'Link', field:  <span dangerouslySetInnerHTML={{__html: 'httpLink'}} />},         
        ]}

Answer 3

我喜欢这样做：

columns={[
          { title: 'Name', field: 'name' },
          { title: 'LinkString', field: 'link'},
          { title: 'Link', field: httpLink ,
            render: (row) => {
            return <span dangerouslySetInnerHTML={{__html: row.httpLink}} />
            },
          },         
        ]}