将Link组件与ListItem和Typescript一起使用 [英] Using a Link component with ListItem and Typescript
问题描述
我正在使用material-ui v3.5.1
I'm using material-ui v3.5.1
我想让ListItem像这样使用Link组件:
I want to make ListItem use the Link component like so:
<ListItem component={Link} to="/some/path">
<ListItemText primary="Text" />
</ListItem>
但是Typescript用一条冗长的错误消息向我打招呼(VSCode中突出显示了"component"一词),在底部显示:
but Typescript greets me with a lengthy error message (the word "component" is highlighted in VSCode), at the bottom it says:
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一起使用?
Is there a workaround to get things like these to work with Typescript?
谢谢!
推荐答案
这目前是我们类型声明的限制(直到我们转向通用道具为止).作为临时的解决方法,您可以将链接提取到另一个组件中,例如
That is currently a limitation of our type declarations (until we move to generic props). As a temporary workaround you can extract your link into another component e.g.
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
这篇关于将Link组件与ListItem和Typescript一起使用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!