MUI Popover组件动态Props传递时重渲染关闭问题求助

问题根源 #

操作Slider触发dispatch更新上层状态后，dynamicProps变化导致组件重渲染：

• 依赖dynamicProps.label的Button会被React销毁旧DOM并创建新元素，anchorEl保存的旧Button引用失效
• MUI Popover检测到锚点元素不存在，自动关闭；或者open状态依赖anchorEl的存在，导致弹窗被关闭

可行方案 #

方案一：拆分弹窗状态与锚点引用，跟踪最新DOM元素 #

将open状态从anchorEl中独立出来，用Ref跟踪Button的最新DOM引用，确保弹窗打开时始终有有效的锚点元素：

function Component({ dynamicProps }) {
  const [open, setOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState(null);
  const buttonRef = React.useRef(null);
  const { dispatch } = useContext();

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

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

  const handleChange = (_, newValue) => {
    dispatch({ body: newValue });
  };

  // 弹窗打开时，自动更新锚点为最新的Button元素
  React.useEffect(() => {
    if (open && buttonRef.current) {
      setAnchorEl(buttonRef.current);
    }
  }, [open, dynamicProps]);

  const id = open ? "simple-popover" : undefined;

  return (
    <div>
      <Button
        ref={buttonRef}
        onClick={handleClick}
        label={dynamicProps.label}
      ></Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
      >
        <Box sx={{ minWidth: "200px", mx: 2 }}>
          <Slider
            value={dynamicProps.value}
            onChange={handleChange}
          />
        </Box>
      </Popover>
    </div>
  );
}

方案二：给Button设置稳定Key，避免DOM重建 #

如果dynamicProps包含唯一标识（如id），给Button设置固定Key，React会复用现有DOM元素而不是重建，保证anchorEl引用始终有效：

function Component({ dynamicProps }) {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const { dispatch } = useContext();

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

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

  const handleChange = (_, newValue) => {
    dispatch({ body: newValue });
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div>
      <Button
        key={dynamicProps.id} {/* 用唯一标识作为Key，稳定DOM */}
        onClick={handleClick}
        label={dynamicProps.label}
      ></Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
      >
        <Box sx={{ minWidth: "200px", mx: 2 }}>
          <Slider
            value={dynamicProps.value}
            onChange={handleChange}
          />
        </Box>
      </Popover>
    </div>
  );
}

方案三：辅助优化：增强Popover稳定性 #

添加MUI Popover的disableRestoreFocus和keepMounted属性，避免弹窗因焦点变化或临时DOM变更意外关闭（建议结合前两种方案使用）：

<Popover
  id={id}
  open={open}
  anchorEl={anchorEl}
  onClose={handleClose}
  disableRestoreFocus
  keepMounted
>

方案选择建议 #

• 若dynamicProps有唯一标识，优先使用方案二，实现最简单
• 若无唯一标识，使用方案一，通过Ref跟踪最新DOM元素
• 方案三作为补充优化，进一步提升弹窗稳定性

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