Использование компонента Link с ListItem и Typescript

Question

Я использую материал-интерфейс 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?

Спасибо!

Answer 1

Это в настоящее время является ограничением наших объявлений типов (пока мы не перейдем к стандартным реквизитам).В качестве временного решения вы можете извлечь свою ссылку в другой компонент, например

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