javascript - 从父组件打开 Material UI 对话框？

Question

我需要从它们的父组件打开两个单独的 Material UI 对话框(条款和隐私)，这是一个 Material UI 的“简单菜单”。我已经将它们导入并嵌套在父级中，我只是不知道如何让它们在单独的文件中从父级打开。我玩过this similar question太久了，但无法让它工作。谢谢。

父组件(菜单):

import React from 'react';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import Terms from './Terms';
import Privacy from './Privacy'

const More = () => {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <IconButton
        aria-label="more"
        aria-controls="simple-menu"
        aria-haspopup="true"
        onClick={handleClick}
        edge='end'
      >
        <MoreVertIcon />
      </IconButton>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Terms of Use</MenuItem>
        <MenuItem onClick={handleClose}>Privacy Policy</MenuItem>
      </Menu>
      <Terms />
      <Privacy />
    </div>
  );
}

export default More;

子组件 1(“条款”对话框):

import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';

const Terms = () => {

  const [openTerms, setOpen] = React.useState(false);

  const openTermsDialog = () => {
    setOpen(true);
  };

  const handleCloseTerms = () => {
    setOpen(false);
  };

  return (
    <Dialog
      open={openTerms}
      onClose={handleCloseTerms}
      aria-labelledby="terms-dialog-title"
      aria-describedby="terms-dialog-description"
    >
      <DialogTitle id="terms-dialog-title">{"Terms of Use"}</DialogTitle>
      <DialogContent>
        <DialogContentText id="terms-dialog-description">
          Terms go here
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleCloseTerms} color="primary" autoFocus>
          Agree
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default Terms;

子组件 2(“隐私”对话框):

import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import Button from '@material-ui/core/Button';

const Privacy = () => {

  const [openPrivacy, setOpen] = React.useState(false);

  const handleOpenPrivacy = () => {
    setOpen(true);
  };

  const handleClosePrivacy = () => {
    setOpen(false);
  };

  return (
    <Dialog
      open={openPrivacy}
      onClose={handleClosePrivacy}
      aria-labelledby="privacy-dialog-title"
      aria-describedby="privacy-dialog-description"
    >
      <DialogTitle id="alert-dialog-title">{"Privacy Policy"}</DialogTitle>
      <DialogContent>
        <DialogContentText id="privacy-dialog-description">
         Privacy policy goes here
        </DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClosePrivacy} color="primary" autoFocus>
          Agree
        </Button>
      </DialogActions>
    </Dialog>
  )
}

export default Privacy;

Answer 1

只需将对话框组件的状态提升到父组件，然后将其传递给子组件。

  const More = () => {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [openDialogName, setOpenDialog] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const openTermsDialog = () => {
    setOpenDialog('TERMS');
    handleClose();
  };

  const openPrivacyDialog = () => {
    setOpenDialog('PRIVACY');
    handleClose();
  };

  const closeDialog = () => {
    setOpenDialog(null);
  };

  return (
    <div>
        {/* ... */}
        <MenuItem onClick={openTermsDialog}>Terms of Use</MenuItem>
        <MenuItem onClick={openPrivacyDialog}>Privacy Policy</MenuItem>
        {/* ... */}
      <Terms open={openDialogName === 'TERMS'} onClose={closeDialog} />
      <Privacy open={openDialogName === 'PRIVACY'} onClose={closeDialog} />
    </div>
  );
}

export default More;

以隐私为例(对于条款也是同样的想法):

const Privacy = ({ open, onClose }) => {
  return (
    <Dialog
      open={open}
      onClose={onClose}
    >
    {/* ... */}
  );
};