React项目中如何在Material UI表格中添加图标？

我在React项目中使用Material UI搭建表格，想要实现每行特定列附带图标的效果，目前已完成的代码和数据如下，请问该如何修改代码添加图标？

当前实现代码 #

TableBodyComponent组件 #

export const TableBodyComponent: React.FC<ITableBody> = ({
    col
  }) => {
    const { classes } = useStyles();
    return (
      <TableRow>
        { col.map(c => (
          <TableCell className={classes.roleTable} key={c}> {c} </TableCell>
        ))}
      </TableRow>
    );
  };

组件使用方式 #

<TableBodyComponent
  col={data}
/>

数据源INITIAL_DATA #

"INITIAL_DATA": [
    {
        "id": 1,
        "client_name": "XYZ",
        "industry": "Automobile",
        "origin": "India",
        "managers": "test"
    },
    {
        "id": 2,
        "client_name": "ABC",
        "industry": "Automobile",
        "origin": "India",
        "managers": "test"
    }
]

解决方案 #

要在表格中添加图标，需要调整组件逻辑，识别目标列并插入图标组件，步骤如下：

1. 安装Material UI图标库（如果未安装）

npm install @mui/icons-material

2. 修改组件逻辑与结构
   首先导入需要的图标（比如编辑、删除图标），然后调整组件接收的props，让它能获取整行数据而非单纯的列值数组，这样可以精准判断要添加图标的列：

import { Edit, Delete } from '@mui/icons-material';
import { IconButton } from '@mui/material';

// 调整组件props类型，接收整行数据
interface ITableBody {
  row: typeof INITIAL_DATA[0];
}

export const TableBodyComponent: React.FC<ITableBody> = ({ row }) => {
  const { classes } = useStyles();
  return (
    <TableRow>
      <TableCell className={classes.roleTable}>{row.client_name}</TableCell>
      <TableCell className={classes.roleTable}>{row.industry}</TableCell>
      <TableCell className={classes.roleTable}>{row.origin}</TableCell>
      <TableCell className={classes.roleTable}>
        {/* 在managers列添加图标 */}
        {row.managers}
        <IconButton size="small">
          <Edit />
        </IconButton>
        <IconButton size="small">
          <Delete />
        </IconButton>
      </TableCell>
    </TableRow>
  );
};

3. 修改组件调用方式
   现在需要遍历数据源，把每行数据传入组件：

<TableBody>
  {INITIAL_DATA.map(row => (
    <TableBodyComponent key={row.id} row={row} />
  ))}
</TableBody>

如果希望保持原有的col字段配置方式（通过字段名数组控制列显示），可以用以下写法：

import { Edit, Delete } from '@mui/icons-material';
import { IconButton } from '@mui/material';

interface ITableBody {
  col: string[];
  row: typeof INITIAL_DATA[0];
}

export const TableBodyComponent: React.FC<ITableBody> = ({ col, row }) => {
  const { classes } = useStyles();
  return (
    <TableRow>
      {col.map(field => (
        <TableCell className={classes.roleTable} key={field}>
          {field === 'managers' ? (
            <>
              {row[field as keyof typeof row]}
              <IconButton size="small">
                <Edit />
              </IconButton>
              <IconButton size="small">
                <Delete />
              </IconButton>
            </>
          ) : (
            row[field as keyof typeof row]
          )}
        </TableCell>
      ))}
    </TableRow>
  );
};

调用时：

<TableBody>
  {INITIAL_DATA.map(row => (
    <TableBodyComponent 
      key={row.id} 
      col={['client_name', 'industry', 'origin', 'managers']} 
      row={row} 
    />
  ))}
</TableBody>

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