如何为Material UI TablePagination的每个菜单项添加唯一ID

当然可以给TablePagination的每个下拉菜单项添加唯一ID！MUI的这个组件提供了足够的自定义空间，我们可以通过MenuProps属性来实现这个需求。

实现思路 #

核心是利用TablePagination的MenuProps配置项，通过自定义renderItem函数来控制每个菜单项的渲染逻辑，在这个函数里我们可以为生成的<li>标签（由MenuItem组件渲染）添加指定格式的唯一ID。

修改后的完整代码 #

import * as React from "react";
import Paper from "@mui/material/Paper";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import MenuItem from "@mui/material/MenuItem"; // 需引入MenuItem组件

const columns = [
  { id: "name", label: "Name", minWidth: 170 },
  { id: "code", label: "ISO Code", minWidth: 100 },
  { id: "population", label: "Population", minWidth: 170, align: "right", format: (value) => value.toLocaleString("en-US") }
];

function createData(name, code, population, size) {
  const density = population / size;
  return { name, code, population, size, density };
}

const rows = [createData("India", "IN", 1324171354, 3287263)];

export default function StickyHeadTable() {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };

  // 自定义菜单项渲染函数，添加唯一ID
  const renderMenuItem = (props) => {
    const { index, value, ...otherProps } = props;
    return (
      <MenuItem
        {...otherProps}
        id={`menu_item_${index}`} // 生成指定格式的唯一ID
        value={value}
      >
        {value}
      </MenuItem>
    );
  };

  return (
    <Paper sx={{ width: "100%", overflow: "hidden" }}>
      <TableContainer sx={{ maxHeight: 440 }}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell key={column.id} align={column.align} style={{ minWidth: column.minWidth }}>
                  {column.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {rows
              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
              .map((row) => {
                return (
                  <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
                    {columns.map((column) => {
                      const value = row[column.id];
                      return (
                        <TableCell key={column.id} align={column.align}>
                          {column.format && typeof value === "number" ? column.format(value) : value}
                        </TableCell>
                      );
                    })}
                  </TableRow>
                );
              })}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={[10, 25, 100]}
        component="div"
        count={rows.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onPageChange={handleChangePage}
        onRowsPerPageChange={handleChangeRowsPerPage}
        // 传入自定义的MenuProps配置
        MenuProps={{
          renderItem: renderMenuItem
        }}
      />
    </Paper>
  );
}

关键说明 #

• 我们额外引入了MenuItem组件，因为自定义渲染菜单项需要基于它来构建
• renderMenuItem函数接收的props中包含index参数（菜单项的顺序索引，从0开始），我们用它来生成menu_item_0、menu_item_1这类符合你需求的唯一ID
• 通过MenuProps将自定义渲染函数传递给TablePagination，这样下拉菜单的每个选项都会带上我们设置的唯一ID

内容的提问来源于stack exchange，提问作者Kundan