物质图:在现场属性上显示HTML标签

Question

我正在使用物料台库为我的React应用程序渲染表格网格。

来源：材料表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单词。

所需的输出：

名称|链接

测试|Google

输出：

名称|链接

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

我看了文档，但在这件事上找不到任何东西。

材料表文档

任何人都可以帮我吗？

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中的真实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}} />
            },
          },         
        ]}