将Link组件与ListItem和Typescript一起使用

时间:2018-11-19 13:44:17

标签: reactjs typescript material-ui material-ui-next

我正在使用material-ui v3.5.1

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

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

但是Typescript用一个冗长的错误消息向我打招呼(VSCode中突出显示了“ component”一词),在底部显示:

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 个答案:

答案 0 :(得分:2)

这目前是我们类型声明的限制(直到我们转向通用道具)。作为临时的解决方法,您可以将链接提取到另一个组件中,例如

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