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

Posted 2023-02-22

【中文标题】TypeScript 错误 - React mui MenuItem 上不存在属性组件

【英文标题】：TypeScript error - property component does not exist on React mui MenuItem

【发布时间】：2021-01-09 13:36:55

【问题描述】：

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

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

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

类型“IntrinsicAttributes & ”上不存在属性“组件” 动作？：（（实例：ButtonBaseActions | null）=> void）| 参考对象 |空 |不明确的;按钮参考？： （（实例：未知）=> 无效）|参考对象 |空 |不明确的; ... 7 更多 ...; TouchRippleProps?: 部分<...> |不明确的; & ...; & ...; & CommonProps<...>...'。 TS2322

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

【参考方案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>

【讨论】：

请问像你这样使用组件和使用实际组件有什么区别？

您正在将React.Node 传递给道具，但组件道具期望的类型为elementType 而不是React.Node，因此所有这些道具期望您提供类型你的React.Node 应该是什么。这与执行以下操作基本相同：React.Element<typeof Link>，但您只需要提供组件名称而不是整行。我会参考这个以获取更多信息：flow.org/en/docs/react/types/#toc-react-element