如何在MUI X Data Grid单元格中渲染Link？遇TS语法错误

你的代码出现TS1005: ';' expected错误，主要有两个核心原因：

1. 文件后缀不支持JSX语法 #

当前文件后缀是.ts，但你在renderCell中使用了JSX（<Link>组件）。TypeScript默认仅在.tsx后缀的文件中解析JSX语法，.ts文件会被当作纯TypeScript代码处理，无法识别JSX标签，因此抛出语法错误。

2. 变量定义与导出不匹配 #

你定义的列数组变量名为myColumns，但导出的却是extraCostColumns，这会导致导出一个未定义的变量，后续使用该导出时会出现额外错误。

修正后的代码 #

将文件后缀改为.tsx，并统一变量名：

import { GridColDef } from "@mui/x-data-grid";
import { Link } from "react-router-dom";

// 统一变量名与导出名称
const extraCostColumns: GridColDef[] = [
    { field: "id", headerName: "ID", width: 70 },        
    {
        field: "prLink",
        headerName: "PR Link",
        width: 150,
        renderCell: (params) => <Link to={params.value}>{params.value}</Link>,
    },
    {
      field: "needExtraCost",
      headerName: "Need E/Cost",
      width: 120,
    },
];

export { extraCostColumns };

额外优化建议 #

若params.value可能为空，建议添加空值判断，避免to属性传入无效值：

renderCell: (params) => params.value ? <Link to={params.value}>{params.value}</Link> : '-',

内容的提问来源于stack exchange，提问作者Derrick.X