在MUI DataGridPro单个单元格中添加多个链接是否可行？

数据老陈

2026-8-25

实现单个单元格内多个科目链接的解决方案

你的表格数据如下：

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

要实现单个单元格内每个科目对应独立链接的效果，只需修改renderCell的逻辑，拆分科目列表并逐个生成链接即可，分两种情况处理：

情况1：科目是逗号分隔的字符串

如果params.value是类似"101, 102"的字符串，先将其拆分为数组，再遍历生成链接：

{
  field: "subjects",
  headerName: "Subjects",
  width: 300,
  renderCell: (params) => {
    // 拆分科目字符串，兼容逗号后带/不带空格的情况
    const subjects = params.value.split(/,\s*/);
    return (
      <span>
        {subjects.map((subject, index) => (
          <React.Fragment key={subject}>
            <Link to={`/cultures/${subject}`}>{subject}</Link>
            {/* 最后一个科目后不添加分隔符 */}
            {index < subjects.length - 1 && ", "}
          </React.Fragment>
        ))}
      </span>
    );
  },
}

情况2：科目本身是数组

如果你的数据中subjects字段已经是数组（比如["101", "102"]），直接遍历数组即可：

{
  field: "subjects",
  headerName: "Subjects",
  width: 300,
  renderCell: (params) => (
    <span>
      {params.value.map((subject, index) => (
        <React.Fragment key={subject}>
          <Link to={`/cultures/${subject}`}>{subject}</Link>
          {index < params.value.length - 1 && ", "}
        </React.Fragment>
      ))}
    </span>
  ),
}