有条件地将 TableCell 的全部内容变成一个链接

Question

我制作了一个带有可点击链接的文件夹图标的表格。 为了改善用户体验，我想让链接的可点击区域更大。 我想让一行中 4 个单元格中的 3 个单元格的全部内容作为链接可点击。

这就是我的意思

我可以成功地使每个单元格内容（如图标或文本）可点击，但这仍然只代表每个单元格中的一小部分区域。

我尝试将整个单元格内容包装在链接中，但它会导致映射混乱，并且仍然无法使单元格的整个内容可点击。

这是我目前所处的位置

<TableBody>
  {folders?.items.map((folder: IFolderDTO, index: number) => {
    const { id, name, updatedAt } = folder;
    return (
      <TableRow
        className={classes.tableRow}
        classes={{ selected: classes.selectedRow }}
        selected={selectedRow === id}
        onClick={() => setSelectedRow(id)}
        key={index}
      >
        <Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
          <TableCell align="center">

            <IconButton color="default" size={'small'}>
              <FolderIcon fontSize="default" />
            </IconButton>

          </TableCell>
        </Link>
        {[name, new Date(updatedAt)].map(cell => (
          <TableCell key={index} align="center">
            <Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
              {getCorrectFormat(cell)}
            </Link>
          </TableCell>
        ))}
        <FolderActionsMenu
          folderId={id}
          onDeleteFolder={onDeleteFolder}
          openDialogWithId={openDialogWithId}
        />
      </TableRow>
    );
  })}
</TableBody>

谢谢！

Answer 1

您可以创建一个标题单元数据数组来描述呈现TableCell所需的任何内容：

const headerCellData = [
  {
    name: 'Calories',
    link: '/',
  },
  {
    name: 'Fat (g)',
    link: '/?filter=fat',
    align: 'right',
  },
  {
    name: 'Carbs (g)',
    link: '/?filter=carbs',
    align: 'right',
  },
  {
    name: 'Protein (g)',
    align: 'right',
  },
];

然后将每个数据项映射到TableCell ：

<TableHead>
  <TableRow>
    {headerCellData.map((c) => (
      <TableCell align={c.align}>
        {c.link ? <Link to={c.link}>{c.name}</Link> : c.name}
      </TableCell>
    ))}
  </TableRow>
</TableHead>

使单元格的全部内容可点击

如果您希望整个单元格可点击（不仅仅是文本），您需要稍微使用 CSS。 删除不可点击的TableCell的内边距，并将保存链接的容器的内边距设置为16px ，这是我们刚刚删除的TableCell的内边距：

<TableCell align={c.align} sx={{ padding: 0 }}>
  <Box sx={{ padding: '16px' }}>
    {c.link ? <Link to={c.link}>{c.name}</Link> : c.name}
  </Box>
</TableCell>