将 Link 组件与 ListItem 和 Typescript 结合使用

IT技术 reactjs typescript material-ui
2021-05-08 15:04:06

我使用的是 material-ui v3.5.1

我想让 ListItem 像这样使用 Link 组件：

<ListItem component={Link} to="/some/path">
  <ListItemText primary="Text" />
</ListItem>

但是 Typescript 给我带来了一条冗长的错误消息（VSCode 中突出显示了“组件”这个词），在底部它说：

The type "typeof Link" cannot be assigned to the type "ComponentClass<ListItemProps, any>"

Property 'to' is missing in type 'ListItemProps' but required in type 'Readonly'. [2322]

有没有办法让这些东西与 Typescript 一起工作？

谢谢！

1个回答

这是目前我们类型声明的一个限制（直到我们转向泛型 props）。作为临时解决方法，您可以将链接提取到另一个组件中，例如

function SomePathLink(props: ButtonBaseProps) {
  return <Link to="/some/path" {...props} />
}

<ListItem component={SomePathLink}>
  <ListItemText primary="Text" />
</ListItem>

文档中更详细的解释：https : //material-ui.com/demos/buttons/#third-party-routing-library

其它你可能感兴趣的问题
上一篇react-native裁剪图像 下一篇React Native，如何在语言更改后更新视图