如何为打开表单的大量按钮创建可重用组件

使用的库：mui 5.4.1

创建一个TableCell含有一个IconButton打开一个Form，代码编写如下。

const data = [
  {
    id: "001",
    name: "A",
    price: 2000
  },
  { id: "002", name: "B", price: 100 },

  ...

];

const SandboxTable = () => {
  return (
    <ThemeProvider theme={muiTheme}>
      <TableContainer>
        <Table>
          
           ...

            {data.map((datum) => (
              <TableRow key={datum.id}>
                <TableCell>{datum.id}</TableCell>
                <TableCell>{datum.name}</TableCell>
                <TableCell>{datum.price}</TableCell>
                <ApproveFormButtonCell
                  toolTip={"approve"}
                  id = {datum.id}
                  IconComponent={<CheckCircleOutlineIcon color={"success"} />}
                />
                <RejectFormButtonCell
                  toolTip={"Reject"}
                  name = {datum.name}
                  IconComponent={<CancelOutlinedIcon color="error" />}
                />
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </ThemeProvider>
  );
};

const ApproveFormButtonCell = ({ toolTip, IconComponent }) => {
  const usePopoverProps = usePopover();
  return (
    <TableCell>
      <IconButtonWithTooltip
        toolTip={toolTip}
        onClick={usePopoverProps.handleOpen}
        IconComponent={IconComponent}
      />
      <BasePopover usePopverProps={usePopoverProps}>
        <ApproveForm id={id} handleClose={usePopoverProps.handleClose} />
      </BasePopover>
    </TableCell>
  );
};

然后我必须创建一个new ButtonCell component每次添加新按钮时。

为了避免这种情况，当在SandboxTable中使用ApproveForm时，无法接收handleClose。

<ApproveFormButtonCell
  toolTip={"approve"}
  id = {datum.id}
  IconComponent={<CheckCircleOutlineIcon color={"success"} />}
/>
  <ApproveForm handleClose={??}/>
</ApproveFormButtonCell>

我需要很多按钮打开表单。 有什么好的答案可以解决这种情况吗？

代码沙箱 https://codesandbox.io/s/silent-framework-dcoslx?file=/src/component/SandboxTable.jsx

为了避免一次性制作每种类型和类型的表单按钮单元组件，您可以抽象常见的行为/UI，即IconButtonWithTooltip and BasePopover组件，转换为通用组件，并将不同的内容作为 prop 传入。在这种情况下，表单组件似乎有所不同。

创建一个通用组件，利用渲染道具 https://reactjs.org/docs/render-props.html，即渲染期间调用的函数的 prop。此渲染道具将传递关闭处理程序作为参数。

Example:

const FormButton = ({ toolTip, IconComponent, renderForm }) => {
  const popoverProps = usePopover();
  return (
    <>
      <IconButtonWithTooltip
        toolTip={toolTip}
        onClick={popoverProps.handleOpen}
        IconComponent={IconComponent}
      />
      <BasePopover usePopverProps={popoverProps}>
        {renderForm({ handleClose: popoverProps.handleClose })}
      </BasePopover>
    </>
  );
};

用法示例：

import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
import CancelOutlinedIcon from "@mui/icons-material/CancelOutlined";
import FormButton from "./FormButton";
import RejectForm from "./RejectForm";
import ApproveForm from "./ApproveForm";

...

<TableBody>
  {data.map((datum) => (
    <TableRow key={datum.id}>
      <TableCell>{datum.id}</TableCell>
      <TableCell>{datum.name}</TableCell>
      <TableCell>{datum.price}</TableCell>
      <TableCell>
        <FormButton
          toolTip={"approve"}
          IconComponent={<CheckCircleOutlineIcon color={"success"} />}
          renderForm={({ handleClose }) => (
            <ApproveForm id={datum.id} handleClose={handleClose} />
          )}
        />
      </TableCell>
      <TableCell>
        <FormButton
          toolTip={"Reject"}
          IconComponent={<CancelOutlinedIcon color="error" />}
          renderForm={({ handleClose }) => (
            <RejectForm handleClose={handleClose} name={datum.name} />
          )}
        />
      </TableCell>
    </TableRow>
  ))}
</TableBody>