如何使用 reactjs material-table 在 table 单元格内显示 html link

Question

我正在使用 Reactjs npm 包的 material-table，我想在 table 单元格中显示 link 和 url。但它显示为字符串。知道如何显示 link

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