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

cotxawn7  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(168)

我正在使用react mui MenuItem,我需要制作一个菜单项作为链接。我试着这样做:

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

但是,当我这样做时,它会抛出一个错误,说属性componentMenuItem上不存在:
类型“IntrinsicAttributes & { action?:((示例:ButtonBaseActions| null)=> void)|RefObject|零|undefined; buttonRef?:((示例:unknown)=> void)|RefObject|零|undefined; ... 7 more ...; TouchRippleProps?:部分<...>|未定义; } & {...;} & { ...; } & CommonProps<...>...'. TS2322
我在这里做错了什么,为什么我会得到这个错误?

jm81lzqq

jm81lzqq1#

文件:

**类型:**elementType
**说明:**使用DOM元素的字符串或组件。

将组件用作React.Node是行不通的。
组件prop需要以下内容: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> Package 在<Link>中:

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

相关问题