如何在 Material UI TableRow 上放置一个 React Router Link答案

【问题标题】：How to put a React Router Link on a Material UI TableRow如何在 Material UI TableRow 上放置一个 React Router Link
【发布时间】：2020-04-23 18:15:18
【问题描述】：

我正在尝试在我的 Material UI TableRow 元素上放置一个Link 组件表单React Router Dom

<TableRow component={Link as any} to={`/company/${company.id}`} className="clt-row" key={company.id}>

但我不断收到以下错误

Property 'to' does not exist on type 'IntrinsicAttributes & TableRowProps & { children?: ReactNode; }'.  TS2769

如何解决此错误？

【问题讨论】：

所以链接只是在没有任何to 道具或任何东西的情况下使用？
@minus.273 不，我正在使用 to 属性，但 TableRow 元素抛出错误。
是的，但是您将它用作TableRow 组件的道具，它实际上应该作为Link 组件的道具。因为在 TableRow API 中我没有看到任何 to 道具
@minus.273 我看到其他答案说要以这种方式实现它。 stackoverflow.com/questions/50691049/…
@AmenRa 你的意思是接受答案为 0 的帖子？您使用的是什么版本的 Material-UI？ v4 看起来应该处理它。所有额外的道具都传递给根元素。别名有问题吗？

标签： reactjs typescript material-ui react-router-dom

【解决方案1】：

行需要单元格。 component 属性表示要用于行根节点的组件。它默认为 tr，但可以是任何将 tr 呈现为根节点的组件。

<TableRow>
    <TableCell colSpan={3}> // or however many columns are in your table
        <Link to={`/company/${company.id}`} className="clt-row" key={company.id} />
    </TableCell>
</TableRow>

【讨论】：

我需要让整行都可以点击才能转到另一个组件。不仅仅是TableCell
有一个colSpan 属性可以让一个单元格跨越任意多列。