如何在 @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 },
];

- Ales Maticic

Answer 1

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

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

你能不能将此作为JSX返回？

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

更新

如上所述并不正确，因为valueGetter将返回一个字符串。

看起来您需要使用renderCell替换valueGetter，它允许您呈现React节点。Material UI文档提供了一个这里的示例。

- Josh

---

这将把它转换为字符串，字符串的内容是"[object Object]"。 - Ales Maticic

看起来你是对的。似乎valueGetter始终返回一个字符串。你需要使用renderCell（更新后的答案）。 - Josh

链接已损坏。这是正确的链接：https://material-ui.com/guides/composition/#link - Pavan Jadda

链接已失效，但实际上已移至此处：https://material-ui.com/components/data-grid/columns/#render-cell - bluescholar1212

Answer 2

已更新。

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

- acxes

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 },
];

- Aditya Choudhary

Answer 4

常量列 = [ { 字段: "id", 标题名称: "ID", 宽度: 150, 渲染单元格: (参数) => ( <a href={/form/${params.value}}>{params.value} ) },];

- Atul Sharma