如何在函数式组件的MUI DataTable中多条件设置setCellProps

当然可以在函数组件里实现，根本不需要继承React.Component。MUIDataTable的setCellProps支持传入带参数的函数，能获取当前单元格的原始数据，刚好用来做条件判断。

直接修改你的代码即可，具体调整如下：

1. 先调整rowContents的利用率存储：保留原始数字用于样式判断，显示格式单独处理，避免字符串转数字的额外操作。
2. 给Utilization列的setCellProps加入条件逻辑，根据利用率数值设置文字颜色。

修改后的完整代码：

const rowContents = teams.filter((team) => !!utilizations[team.id])
  .map((team: Team) => ({
    team,
    summary: utilizations[team.id].getSummary(),
  }))
  .map(({ team, summary }) => (
    [
      team.name,
      summary.utilization // 保留原始数字，用于后续样式判断
    ]
  ))

const columns = [
  {
    name: "Team",
    options: {
      filter: true,
      setCellProps: () => ({ style: { padding: 5 }}),
      setCellHeaderProps: () => ({ style: { padding: 5 }}),
    }
  },
  {
    name: "Utilization",
    options: {
      filter: true,
      // 自定义单元格props，加入条件判断
      setCellProps: (cellData) => {
        const utilization = Number(cellData[0]);
        return {
          style: {
            padding: 5,
            color: utilization <= 50 ? 'green' : 'red'
          }
        };
      },
      setCellHeaderProps: () => ({ style: { padding: 5 }}),
      // 单独处理显示格式，输出带千分位的字符串
      customBodyRender: (value) => value.toLocaleString()
    }
  }
];

return (
  <MUIDataTable
    title={'Teams'}
    columns={columns}
    data={rowContents}
    options={{
      draggableColumns: { enabled: true },
      pagination: false,
      selectableRows: "none"
    }}
  />     
);

重点说明： #

• setCellProps的参数cellData包含当前单元格的原始数据，转成数字后就能完成条件判断。
• 用customBodyRender单独处理显示格式，既保证样式判断的准确性，又不影响页面展示效果。
• 函数组件和类组件在MUIDataTable的配置逻辑上没有本质区别，所有列配置的回调函数都能正常工作，完全不需要继承React.Component。

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