Material-UI-如何强制性地/以编程方式打开对话框

问题描述

通常，这就是您使用Material-UI的Dialog的方式。下面的代码取自Material-UI的文档

export default function AlertDialog() {
  const [open,setopen] = React.useState(false);
  const handleClickOpen = () => setopen(true);
  const handleClose = () => setopen(false);

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open Dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
       {...}
      </Dialog>
    </div>
  );
}

但是我希望它能命令性地创建Dialog，有点像失火。每当我需要创建Dialog组件时，都不想将它们{em>嵌入。理想情况下，我想这样称呼它

createDialog(<>
   <h1>My Dialog</h1>
   <span>My dialog content</span>
   <button onClick={() => closeDialog()}>Close</button>
</>)

所以我的组件定义看起来像这样

const createDialog = () => {
   // ???
}
const closeDialog = () => {
   // ???
}
export default function AlertDialog() {
  const [open,setopen] = React.useState(false);
  const handleClickOpen = () => setopen(true);
  const handleClose = () => {
     createDialog(<>
        <h1>My Dialog</h1>
        <span>My dialog content</span>
        <button onClick={() => closeDialog()}>Close</button>
     </>)
  };

  return (
    <Button variant="outlined" color="primary" onClick={handleClickOpen}>
      Open Dialog
    </Button>
  );
}

解决方法

您可以使用React的Provider模式来重用对话框。官方的React文档已经详细解释了，因此在此不再赘述。

首先创建一个自定义Provider组件，在这种情况下，我将其称为DialogProvider。该组件将管理本地状态的Dialog列表。

const DialogContext = React.createContext();

export default function DialogProvider({ children }) {
  const [dialogs,setDialogs] = React.useState([]);

  return (
    <DialogContext.Provider {...}>
      {children}
    </DialogContext.Provider>
  );
}

如您所见，我们这里有一系列对话框，其中包含对话框道具，在渲染时它们将被映射到实际的<Dialog />组件上。

export default function DialogProvider({ children }) {
  const [dialogs,setDialogs] = React.useState([]);

  return (
    <DialogContext.Provider {...}>
      {children}
      {dialogs.map((dialog,i) => {
        return <DialogContainer key={i} {...dialog} />;
      })}
    </DialogContext.Provider>
  );
}

<DialogContainer/>是<Dialog/>的父组件。 在其中放置您希望可重复使用的任何内容。这是一个入门的最小示例。

function DialogContainer(props: DialogContainerProps) {
  const { children,open,onClose,onKill } = props;

  return (
    <Dialog open={open} onClose={onClose} onExited={onKill}>
      {children}
    </Dialog>
  );
}

我们可以正常使用setState创建和删除对话框。

const [dialogs,setDialogs] = React.useState([]);

const createDialog = (option) => {
  const dialog = { ...option,open: true };
  setDialogs((dialogs) => [...dialogs,dialog]);
};

const closeDialog = () => {
  setDialogs((dialogs) => {
    const latestDialog = dialogs.pop();
    if (!latestDialog) return dialogs;
    if (latestDialog.onClose) latestDialog.onClose();
    return [...dialogs].concat({ ...latestDialog,open: false });
  });
};

但是在这里定义它们时，如何在其他组件中调用它们呢？好吧，请记住我们在这里使用Provider组件，这意味着我们可以向下传递上下文数据，以便其他组件可以引用，在这种情况下，我们想向下传递createDialog和closeDialog

const [dialogs,setDialogs] = React.useState([]);
const createDialog = (option) => {/*...*/};
const closeDialog = () => {/*...*/};
const contextValue = React.useRef([createDialog,closeDialog]);

return (
  <DialogContext.Provider value={contextValue.current}>
    {children}
    {dialogs.map((dialog,i) => ...)}
  </DialogContext.Provider>
);

我们在这里差不多完成了，现在我们需要将DialogProvider添加到组件树中。

export default function App() {
  return (
    <DialogProvider>
      <App {...} />
    </DialogProvider>
  );
}

但是在使用它们之前，我们应该创建一个钩子以轻松地从父级访问上下文。因此，在您的DialogProvider.jsx

export const useDialog = () => React.useContext(DialogContext);

现在我们可以像这样使用它了。

import { useDialog } from "./DialogProvider";

export default function Content() {
  const [openDialog,closeDialog] = useDialog();
  const onOpenDialog = () => {
    openDialog({
      children: (
        <>
          <DialogTitle>This dialog is opened imperatively</DialogTitle>
          <DialogContent>Some content</DialogContent>
          <DialogActions>
            <Button color="primary" onClick={closeDialog}>Close</Button>
          </DialogActions>
        </>
      )
    });
  };

  return (
    <Button variant="contained" onClick={onOpenDialog}>
      Show dialog
    </Button>
  );
}

实时演示

您可以在此处进行现场演示