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

Question

我正在使用 react mui MenuItem，我需要制作一个菜单项作为 link。我试过这样：

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

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

Property 'component' does not exist on type 'IntrinsicAttributes & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject | null | undefined; ... 7 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & { ...; } & CommonProps<...>...'. TS2322

我做错了什么，为什么会出现这个错误？

Answer 1

文档：

Type: elementType

Description: Either a string to use a DOM element or a component.

将组件用作 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>

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

TypeScript error - property component does not exist on React mui MenuItem

typescript

reactjs

react-material

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

TypeScript error - property component does not exist on React mui MenuItem

typescript

reactjs

react-material

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