React中如何在子组件关闭弹窗时同步更新父子组件的弹窗状态

React中实现子组件向父组件传值的核心逻辑是：父组件将状态修改函数通过props传递给子组件，子组件在需要同步状态时触发该回调函数，将最新值作为参数传入即可。

针对你遇到的弹窗状态不同步问题，推荐优先使用状态提升方案，从根源避免多份状态冗余导致的同步异常：

方案1：状态提升（最优实现） #

移除子组件内部冗余的弹窗状态，所有弹窗状态统一由父组件管理，无需额外同步逻辑。

修改父组件Drawer.js #

新增关闭弹窗的方法，并将状态和修改方法都通过props传递给子组件：

const Drawer = props => {
  const theme = useTheme();
  const { history } = props;
  const [open, setOpen] = React.useState(false);
  const [dialogOpen,setDialogueOpen] = React.useState(false)

  const handleDialogueOpen = () => {
    setDialogueOpen(true)
  }

  // 新增关闭弹窗的方法
  const handleDialogueClose = () => {
    setDialogueOpen(false)
  }

  return (
    <Box sx={{ display: 'flex' }}>
      
      <AppBar position="fixed" open={open}>

        <Toolbar>
          <Typography variant="h6" noWrap component="div">
            XYZ
          </Typography>
          <Button onClick={handleDialogueOpen}>Filter</Button>
        </Toolbar>
      </AppBar>
      

      {/* 传入弹窗状态和关闭回调，注意原prop名dilaog为拼写错误，建议修正为dialog */}
      <DialogBox dialogOpenProp={dialogOpen} onDialogClose={handleDialogueClose}/>

    </Box>
  );
}

export default withRouter(Drawer);

修改子组件DialogBox.js #

移除内部冗余的状态和useEffect监听，直接使用父组件传入的props控制弹窗：

const DialogBox = (props) => {
  const handleDialogClose = () => {
    // 直接调用父组件传入的关闭回调即可
    props.onDialogClose()
  }

  return (
    <>
      <CssBaseline />
      <Dialog
        fullWidth
        onClose={handleDialogClose}
        open={props.dialogOpenProp}
        maxWidth="xs"
        sx={{
          backdropFilter: "blur(5px)",
        }}
      >
        <DialogTitle>Example Dialog</DialogTitle>
        <DialogContent>Example Content Here</DialogContent>
        <DialogActions>
          <Button onClick={handleDialogClose}>Close</Button>
        </DialogActions>
      </Dialog>
    </>
  );
}

export default DialogBox;

方案2：保留子组件内部状态的实现 #

如果业务场景需要子组件自己维护弹窗状态，只需要在子组件关闭逻辑中追加调用父组件传入的回调即可：

// 子组件handleDialogClose修改为
const handleDialogClose = () => {
  setOpen(false)
  // 调用父组件传入的回调同步状态
  props.onDialogClose()
}

内容的提问来源于stack exchange，提问作者Saurabh