是否可以使用 MUI\'s DataGridPro 在单个单元格中有多个链接答案

【问题标题】：Is it possible to have multiple links in a single cell with MUI's DataGridPro是否可以使用 MUI\'s DataGridPro 在单个单元格中有多个链接
【发布时间】：2022-12-14 08:32:09
【问题描述】：

Batch | Date |    Subjects
  1     Mar 1  101, 102
  2     Mar 2  105, 106, 107 
  3     Mar 3  109

我需要最后一列中的值作为链接，每个链接指向该主题的一个页面。数据在一个数组中，当我使用 renderCell 时，它会将所有值聚集在一起并创建一个链接。

  {
    field: "subjects",
    headerName: "Subjects",
    width: 300,
    renderCell: (params) => (
      <Link to={`/cultures/${params.value}`}>{params.value}</Link>
    ),
  },

这可能吗？

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

我想我已经找到了解决办法。它有效，但我收到一些错误消息，这些消息不会妨碍页面运行。

我创建了自己的函数并传递给renderCell，称为RenderLinks

  {
    field: "subjects",
    headerName: "Cultures",
    width: 300,
    renderCell: RenderLinks,
  },

该函数生成一个 React List 组件，其中包含项目按钮内可用的链接。

const RenderLinks = ({ value }) => {
  return (
    <List style={flexContainer}>
      {value.map((id) => (
        <ListItemButton
          key={id}
          component={Link}
          to={`/subject/${id}`}
        >
          {id}
        </ListItemButton>
      ))}
    </List>
  );
};

这是我现在收到的错误消息：警告：道具类型失败：提供给GridCell 的道具value 无效，应为[数字、对象、字符串、布尔值] 类型之一。

页面加载并且组件功能完美，允许用户单击链接并导航到我希望他们去的地方。该错误并不严重，但我仍然想知道如何修复它。

【讨论】：