如何使用@material-ui/data-grid创建连续的链接

Question

我正在使用 @material-ui/data-grid 显示一些数据，每一行必须有一个到下一页的链接。我可以传递所有必需的数据，但不确定如何创建链接。文档没有在任何地方提到它。我尝试使用 valueGetter 传递它，如下例所示，但由于 React 渲染 HTML 的方式，它仅将 href 作为字符串返回。

const columns = [
  {
    field: "id",
    headerName: "ID",
    width: 150,
    valueGetter: (params) => 
      `<a href="${params.getValue("id")}">${params.getValue("id")}</a>`,
  },
  { field: "inviteId", headerName: "Invite Id", width: 150 },
];

Answer 1

您将链接作为字符串返回：

`<a href="${params.getValue("id")}">${params.getValue("id")}</a>`

您不能将其作为 JSX 返回吗？

return (<a href={params.getValue("id")}>{params.getValue("id")}</a>)

更新

上面的内容不正确，因为

valueGetter

将返回一个字符串。

看来您需要将

valueGetter

替换为

renderCell

，这样您就可以渲染 React 节点。 Material UI 文档在此处提供了一个示例。

Answer 2

已更新。

const columns = [
  {
    field: "id",
    headerName: "ID",
    width: 150,
    renderCell: (params) => 
      <a href="${params.row.id}">${params.row.id}</a>,
  },
];

Answer 3

我尝试过这个，它对我有用。

const columns = [
  {
    field: 'id',
    headerName: 'ID',
    width: 150,
    renderCell: (params) => {
      return <a href='${params.id}'>${params.id}</a>;
    },
  },
  { field: 'inviteId', headerName: 'Invite Id', width: 150 },
];

Answer 4

const columns = [
  {
    field: "id",
    headerName: "ID",
    width: 150,
    renderCell: (params) => (
      <a href={`/form/${params.value}`}>{params.value}</a>
    ) 
},];