基于MUI 5.4.1实现可复用的表单弹窗按钮组件方案

你当前的问题在于每个表单操作按钮都需要重复创建专属的ButtonCell组件，导致代码冗余。可以通过封装一个通用的表单按钮单元格组件来解决，将popover逻辑与具体表单解耦，实现复用。

步骤1：创建通用FormButtonCell组件 #

这个组件会封装popover的打开/关闭逻辑，接受具体表单组件、表单参数、按钮配置作为props，自动将handleClose传递给表单：

const FormButtonCell = ({ toolTip, IconComponent, FormComponent, formProps }) => {
  const usePopoverProps = usePopover();
  // 合并表单参数与handleClose方法
  const finalFormProps = {
    ...formProps,
    handleClose: usePopoverProps.handleClose
  };

  return (
    <TableCell>
      <IconButtonWithTooltip
        toolTip={toolTip}
        onClick={usePopoverProps.handleOpen}
        IconComponent={IconComponent}
      />
      <BasePopover usePopverProps={usePopoverProps}>
        <FormComponent {...finalFormProps} />
      </BasePopover>
    </TableCell>
  );
};

步骤2：在表格中复用通用组件 #

无需再创建ApproveFormButtonCell、RejectFormButtonCell这类专属组件，直接在SandboxTable中使用FormButtonCell，传入对应表单组件和参数即可：

const SandboxTable = () => {
  return (
    <ThemeProvider theme={muiTheme}>
      <TableContainer>
        <Table>
          {/* 省略表格头部等代码 */}
          <TableBody>
            {data.map((datum) => (
              <TableRow key={datum.id}>
                <TableCell>{datum.id}</TableCell>
                <TableCell>{datum.name}</TableCell>
                <TableCell>{datum.price}</TableCell>
                {/* 审批操作按钮 */}
                <FormButtonCell
                  toolTip="approve"
                  IconComponent={<CheckCircleOutlineIcon color="success" />}
                  FormComponent={ApproveForm}
                  formProps={{ id: datum.id }}
                />
                {/* 拒绝操作按钮 */}
                <FormButtonCell
                  toolTip="Reject"
                  IconComponent={<CancelOutlinedIcon color="error" />}
                  FormComponent={RejectForm}
                  formProps={{ name: datum.name }}
                />
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </ThemeProvider>
  );
};

优势说明 #

• 彻底消除重复的ButtonCell组件代码，新增表单按钮时只需传入对应配置即可
• 自动处理handleClose的传递，无需手动维护popover与表单的通信逻辑
• 保持代码结构清晰，将通用逻辑封装在一处，便于后续维护和修改

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