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

Question

我想渲染一个ListItem以react-routerLink为根组件的组件，如下所示：

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

但是，我收到 TypeScript 错误：

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

显然，组件to使用的 propLink是 props 接口的一部分ListItem......

如何解决这个问题？

Answer 1

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

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