如何使用@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 文档提供了一个example here。