Reactjs 选择菜单时如何关闭反应/物料界面菜单/子菜单层次结构

我有一个material ui菜单组件（称为

FileImportMenu

），它根据菜单选择打开一个对话框

App.tsx

  return (
    <div>
      <>
        <Button onClick={handleMenuClick}>
          JSON <ExpandMoreIcon className={menuAnchorEl ? classes.upIcon : classes.downIcon}/>
        </Button>
        <Menu
          getContentAnchorEl={null}
          anchorEl={menuAnchorEl}
          open={Boolean(menuAnchorEl)}
          onClose={handleMenuClose}
        >
          <MenuItem disableGutters>
            <FileImportMenu
              variant="text"
              menuTitle="Load ..."
              parentClose={handleMenuClose}
            />
          </MenuItem>
        </Menu>
      </>

      <FileImportMenu
        variant="contained"
        menuTitle="File"
      />
    </div>
  );

App.tsx
返回(
JSON
);

FileImportMenu.tsx
const[fileSelectionDialogOpen，setFileSelectionDialogOpen]=React.useState（false）；
常量handleFileSelectionDialogOpen=（）=>{
//如果（关闭）{
//parentClose（）；
// }
setFileSelectionDialogOpen（true）；
};
常量handleFileSelectionDialogClose=（）=>{
如果（关闭）{
parentClose（）；
}
setFileSelectionDialogOpen（false）；
};
返回(
);

我想将

文件导入菜单

组件放在另一个材质ui

菜单

（作为子菜单显示在上面的应用程序中）中，并且我想在进行选择时（即对话框打开时），关闭菜单，同时关闭其父菜单。当前，对话框关闭时，子菜单关闭，父菜单关闭（如编码所示）

在

FileImportMenu

中，我传递一个

parentClose

属性，该属性包含一个关于如何关闭父菜单的回调。不幸的是，当我在dialog open（上面的注释代码）上使用回调时，组件会重新呈现，而刚才打开的对话框会消失

处理这种情况的正确方法是什么？i、 e.当对话框打开，所有菜单和子菜单关闭时

FileImportMenu.tsx

  const [fileSelectionDialogOpen, setFileSelectionDialogOpen] = React.useState(false);
  const handleFileSelectionDialogOpen = () => {
    // if (parentClose) {
    //   parentClose();
    // }
    setFileSelectionDialogOpen(true);
  };
  const handleFileSelectionDialogClose = () => {
    if (parentClose) {
      parentClose();
    }
    setFileSelectionDialogOpen(false);
  };

return (
  <>
    <Button/>
    <Menu/>
    <Dialog/>
  </>
);