如何使用@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，它允许您呈现一个作出反应的节点。Material UI 文档在这里提供了一个示例。