如何使用@material-ui/data-grid 连续创建一个link

Question

我正在使用@material-ui/data-grid 来显示一些数据，每行必须有一个 link 到下一页。我可以传递所有必需的数据，但不确定如何创建 link。该文档没有在任何地方提及它。我尝试像下面的示例一样使用 valueGetter 传递它，但由于 React 如何呈现 HTML 它只是 returns 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

您正在 return 将 link 作为字符串：

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

你能不能return把它当作 JSX？

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

更新

以上内容不正确，因为 valueGetter 将要 return 一个字符串。

看来您需要将 valueGetter 换成 renderCell，这样您就可以渲染 React 节点。 Material UI 文档提供了 example here.

如何使用@material-ui/data-grid 连续创建一个link

How to create a link in a row with @material-ui/data-grid

javascript

datagrid

reactjs

material-ui

更新