有条件地将 TableCell 的全部内容变成 link

Question

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

这就是我的意思

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

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

这是我目前所处的位置

...

interface IProps extends Omit<unknown, 'children'> {
  folders?: IGetAllRequestDTO<IFolderDTO> | null;
  reload: boolean;
}

const RootFoldersTable = ({ folders, reload }: IProps): JSX.Element => {
  const [selectedRow, setSelectedRow] = useState('');
  const classes = useStyles();
  const dispatch = useDispatch();

  const getCorrectFormat = useCallback(cell => {
    return cell instanceof Date
      ? format(cell as Date, "MM/dd/yyyy hh:mmaaaaa'm'")
      : cell;
  }, []);

  const getAllFolders = () => {
    dispatch(appActions.getAllFoldersRequest({}));
  };

  useEffect(() => {
    getAllFolders();
  }, [reload]);

  const openDialogWithId = (folderId: string) => {
    dispatch(appActions.setDialogFormFolderId(folderId));
    dispatch(appActions.setDialogOpen());
  };

  const onDeleteFolder = (id: string) => {
    dispatch(appActions.deleteFolderRequest(id));
  };

  const tableHeadElements = [
    { label: 'Name', key: 'name', sortable: false },
    { label: 'Last Modified', key: 'updateAt', sortable: false },
    { label: 'Actions', sortable: false }
  ];

    const tableHeadElements = [
        { label: 'Name', key: 'name', sortable: false },
        { label: 'Last Modified', key: 'updateAt', sortable: false },
        { label: 'Actions', sortable: false }
      ];
    
      return (
        <div className={classes.tableContainer}>
          <TableContainer className={classes.tableBodyContainer}>
            <Table className={classes.table} size="small">
              <TableHead>
                <TableRow className={classes.tableHeadRow}>
                  {tableHeadElements.map(e => (
                    <TableCell key={e.key} align="center">
                      {e.label}
                    </TableCell>
                  ))}
                </TableRow>
              </TableHead>
        <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

您可以创建一个 header 单元格数据数组来描述呈现 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>

make the entire contents of the cell clickable

如果您希望整个单元格都可点击（而不仅仅是文本），您需要稍微尝试一下 CSS。删除无法点击的 TableCell 的填充，并将容纳 link 的容器的填充设置为 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>

有条件地将 TableCell 的全部内容变成 link

Make entire contents of a TableCell into a link conditionally

reactjs

hyperlink

material-ui

tablerow

tablecell