reactjs - ListItem ve Typescript ile Link bileşeni kullanmak

Material-ui v3.5.1 kullanıyorum

ListItem'in Link bileşenini şu şekilde kullanmasını istiyorum:

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

ama Typescript beni uzun bir hata mesajıyla karşılıyor (VSCode'da "component" kelimesi vurgulanmış), altta ise şöyle yazıyor:

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]

Bunlar gibi şeyleri Typescript ile çalıştırmak için bir çözüm yolu var mı?

Teşekkürler!

Cevap #1

Bu şu anda tür deklarasyonlarımızın bir kısıtlamasıdır (genel özelliklere geçene kadar). Geçici bir çözüm olarak, bağlantınızı başka bir bileşene çıkarabilirsiniz, örneğin.

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

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

Belgelerde daha ayrıntılı açıklama: https://material-ui.com/demos/buttons/#third-party-routing-library

İlgili makaleler