如何使用reactjs material-table在表格单元格内显示html链接答案

【问题标题】：How to display html link inside table cell using reactjs material-table如何使用reactjs material-table在表格单元格内显示html链接
【发布时间】：2019-10-08 07:18:19
【问题描述】：

我正在使用 Reactjs npm 包的材料表，我想在表格单元格中显示一个带有 url 的链接。但它显示为字符串。知道如何显示链接

data: [
      {
        subject: 'Announcment',
        type: 1,
        approver: 'john',
        state: 1,
        view: "<Link to="/users">cell</Link>",
      },
    ]

【问题讨论】：

试试view: () => <Link to="/users">Cell</Link>
没有运气。还尝试了以下方式查看：() => {return (Cell)}，它说以下错误：失败的道具类型：无效的道具children提供给@987654326 @，需要一个 ReactNode。
你能给我一些关于material-table的参考吗？
这里是material-table.com/#
material-table.com/#/docs/features/custom-column-rendering

标签： node.js reactjs material-ui material-table

【解决方案1】：

是的，这是解决方案。

columns: [
      { 
        title: 'Analytics', 
        field: 'analytics', 
        render: rowData => <Link to="/{rowData.url}">view</Link>,,
      },
    ],

and 


data: [
      {
        subject: 'Announcment',
        type: 1,
        approver: 'john',
        state: 1,
        url: "/users",
      },

【讨论】：

【解决方案2】：

我觉得你应该试试这样的东西

import { Link } from 'react-router';

const columns = [
  {
    header: '',
    id: 'links',
    render: ({ row }) => (<Link to={{ pathname: `/example/${row.id}` }}>{row.name}</Link>)
  }
];

我没有仔细检查代码，所以可能有一些语法错误

【讨论】：

【解决方案3】：

 const columnContent = [
    { title: 'No', render: (rowData: any) => rowData.tableData.id + 1 },
    { title: 'Name', field: 'name' },
    { title: 'Website',
      field: 'companyURL',
      render: (rowData: any) => (
        <a
          href={rowData.companyURL}
          target="_blank"
          style={{ textDecoration: 'none' }}
        >
          {rowData.companyURL}
        </a>
      ) },
  ];
          <MaterialTable
        {...other_props_here}
            columns={columnContent}
            }}
          />

如下所示的示例列数据

{
 name: "alex",
 companyURL : "https://durga.io/"
}

【讨论】：