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

Question

使用的库: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>
  );
};

然后每次添加新按钮时，我都必须创建一个新的 ButtonCell 组件。

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

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

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

codesandbox

Answer 1

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

创建一个通用组件，利用 render prop 的强大功能，即一个在渲染期间调用的函数的 Prop 。此渲染 Prop 将关闭处理程序作为参数传递。

例子:

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>