如何使用reactjs material-table显示表单元格中的html链接

Question

我正在使用Reactjs npm包的material-table，我想在表格单元中显示一个带有url的链接。但它将其显示为字符串。你知道如何显示链接吗？

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

Answer 1

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

import { Link } from 'react-router';

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

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

Answer 2

是的，这就是解决方案。

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",
      },

Answer 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/"
}