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

Question

我想用 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 属性接口的一部分...

如何解决？

Answer 1

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

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