TypeScript 错误 - React mui MenuItem 上不存在属性组件

Question

我正在使用react mui MenuItem ，我需要将菜单项作为链接。 我试过这样：

        <MenuItem
          component={<Link href={`/backend/api/exam/${row.id}/result`} />}
          className={classes.menuItem}
          onClick={() => handleClose()}>
          Result
        </MenuItem>

但是，当我这样做时，它会抛出一个错误，指出MenuItem上不存在该属性component ：

类型 'IntrinsicAttributes & { action?: ((instance: ButtonBaseActions | null) => void) | 上不存在属性“组件” 引用对象 | 空| 不明确的; buttonRef?: ((instance: unknown) => void) | 引用对象 | 空| 不明确的; ... 7 更多 ...; TouchRippleProps？：部分<...> | 不明确的; } & { ...; } & { ...; } & CommonProps<...>...'。 TS2322

我在这里做错了什么，为什么会出现此错误？

Answer 1

文档：

类型：元素类型

描述：使用 DOM 元素或组件的字符串。

将组件用作React.Node是行不通的。

组件道具需要以下内容： React.Element<typeof Component> 。

在您的情况下，将组件作为typeof就可以了：

import { Link } from 'react-router-dom';
....

<MenuItem
  component={Link}
  to={`/backend/api/exam/${row.id}/result`}
  className={classes.menuItem}
  onClick={() => handleClose()}>
  Result
</MenuItem>

另一种解决方法是将您的<MenuItem>包裹在<Link> ：

<Link to={`/backend/api/exam/${row.id}/result`}>
  <MenuItem
    className={classes.menuItem}
    onClick={() => handleClose()}>
  >
    Result
  </MenuItem>
</Link>