使用 TypeScript 时如何将 prop 传递给 material-ui@next 中的自定义根组件？

Posted 2023-02-21

【中文标题】使用 TypeScript 时如何将 prop 传递给 material-ui@next 中的自定义根组件？

【英文标题】：How to pass prop to custom root component in material-ui@next when using TypeScript?

【发布时间】：2018-09-21 19:47:54

【问题描述】：

我想用 react-router Link 渲染一个 ListItem 组件作为根组件，如下所示：

        <ListItem
          to="/profile"
          component=Link
        >
          Profile
        </ListItem>

但是，我收到 TypeScript 错误：

(50,15): error TS2339: Property 'to' does not exist on type 'IntrinsicAttributes & ListItemProps &  children?: ReactNode; '.

显然，Link 组件使用的to 属性是ListItem 属性接口的一部分...

如何解决？

【参考方案1】：

TypeScript 不会拒绝使用 prop-spread 语法传递的额外 props，因此这是可行的：

    <ListItem ...to: "/profile" component=Link>
      Profile
    </ListItem>