如何解决如何将列链接添加到 material-ui 表并使用列链接 ID 重定向到摘要详细信息页面
我正在处理 Material-UI 表,例如此处的以下 basic table,但我在开头添加了一个 id 列。
假设我在我的 React 应用程序中的路线 localhost:3000/basic-table
上有这个基本表格示例,我怎样才能使用下面的代码并将 <tableCell>{row.id}</tableCell>
变成一个 <a href link>
,这将允许用户单击此 {row.id}
列,然后向用户显示一个新屏幕,我可以在其中获取此 ID 并显示有关它的更多数据?
我想要实现的基本上是从主要的父报告中获得,用户可以单击行 ID,然后会根据该 ID 向用户显示详细报告,即向下钻取报告。
从 doco 中,我找不到任何可以实现此目的的示例,因为不确定如何添加列链接。
谁能帮忙解决这个问题或给我举个例子。
{rows.map((row) => (
<TableRow key={row.id}>
<TableCell component="th" scope="row">
{row.id}
</TableCell>
<TableCell align="right">{row.name}</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
解决方法
您可以使用历史 API
import { useHistory } from 'react-router-dom';
const YourComponent = () => {
...
const history = useHistory();
return {
...
rows.map((row) => (
<TableRow key={row.id} onClick={() => history.push(yourLocation)}>
<TableCell component="th" scope="row">
{row.id}
</TableCell>
<TableCell align="right">{row.name}</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。