MUI DataGrid配置邮件/电话跳转功能的问题求助

问题场景 #

在MUI DataGrid的操作列中，尝试通过GridActionsCellItem的href属性设置mailto:和tel:链接，点击后无法唤起邮件客户端或电话应用，使用react-router-dom的Link组件也无效。

解决方案 #

GridActionsCellItem默认使用适配react-router的链接组件，无法直接处理mailto/tel这类外部协议链接，可通过以下两种方式解决：

方法1：指定原生<a>标签作为链接组件 #

直接给GridActionsCellItem设置LinkComponent="a"，让它用原生a标签渲染，这样href里的协议链接就能正常触发系统应用：

{
  field: 'actions',
  type: 'actions',
  width: 120,
  getActions: (params) => [
    <GridActionsCellItem
      icon={<EditIcon />}
      label="编辑用户"
      onClick={() => {
        navigate(`/admin/users/${params.row.email}`)
      }}
    />,
    <GridActionsCellItem
      icon={<DeleteIcon />}
      label="停用用户"
      onClick={() => {
        setDeactivateUser(params.row)
        handleDeactivateUserDialogOpen()
      }}
    />,
    <GridActionsCellItem
      icon={<EmailIcon />}
      label="发送邮件"
      href={`mailto:${params.row.email}`}
      showInMenu
      LinkComponent="a"
    />,
    <GridActionsCellItem
      icon={<PhoneIcon />}
      label="拨打电话"
      href={`tel:${params.row.phone_number}`}
      showInMenu
      LinkComponent="a"
    />
  ]
}

方法2：通过onClick手动触发跳转 #

如果不想修改链接组件，也可以在onClick事件里直接通过window.location.href触发协议跳转：

{
  field: 'actions',
  type: 'actions',
  width: 120,
  getActions: (params) => [
    <GridActionsCellItem
      icon={<EditIcon />}
      label="编辑用户"
      onClick={() => {
        navigate(`/admin/users/${params.row.email}`)
      }}
    />,
    <GridActionsCellItem
      icon={<DeleteIcon />}
      label="停用用户"
      onClick={() => {
        setDeactivateUser(params.row)
        handleDeactivateUserDialogOpen()
      }}
    />,
    <GridActionsCellItem
      icon={<EmailIcon />}
      label="发送邮件"
      onClick={() => {
        window.location.href = `mailto:${params.row.email}`
      }}
      showInMenu
    />,
    <GridActionsCellItem
      icon={<PhoneIcon />}
      label="拨打电话"
      onClick={() => {
        window.location.href = `tel:${params.row.phone_number}`
      }}
      showInMenu
    />
  ]
}

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