如何在Material Data Grid中添加可正常生效的超链接

不要直接将链接HTML作为字符串传入单元格值，Data Grid默认会对HTML字符串做转义处理，只会渲染为纯文本，无法点击。正确实现方式是通过列配置的renderCell属性自定义单元格渲染内容：

• 找到需要渲染超链接的对应列配置项
• 为该列添加renderCell回调函数，在回调中返回链接元素
• 给链接元素添加点击事件拦截，阻止事件冒泡，避免触发Data Grid自带的行选中、行点击事件，导致链接跳转失效

参考实现代码：

import { DataGrid } from '@mui/x-data-grid';

// 列配置
const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: '名称', width: 150 },
  // 超链接列配置
  {
    field: 'jumpLink',
    headerName: '操作链接',
    width: 160,
    renderCell: (params) => {
      // params.row 对应当前行的所有数据
      return (
        <a
          href={params.row.targetUrl}
          target="_blank"
          rel="noopener noreferrer"
          onClick={(e) => e.stopPropagation()}
        >
          点击跳转
        </a>
      )
    }
  }
];

// 行数据，每行数据里带上链接需要的目标地址字段即可
const rows = [
  { id: 1, name: '测试项1', targetUrl: '/path/1' },
  { id: 2, name: '测试项2', targetUrl: '/path/2' },
];

export default function LinkDataGrid() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  )
}

如果需要匹配Material UI的整体样式风格，也可以将原生a标签替换为@mui/material提供的Link组件，属性写法完全一致。

常见失效原因排查：

• 未使用renderCell自定义渲染，直接将HTML字符串作为单元格值传入，被框架转义为纯文本
• 未添加e.stopPropagation()，点击事件被Data Grid的行容器拦截，无法触发链接默认跳转行为
• 链接的href属性取值错误，没有正确从行数据中拿到目标地址

内容的提问来源于stack exchange，提问作者TangoCharlie