如何使用@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

我使用@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 2

更新

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