点击MUI MenuItem后React组件无法渲染的问题排查

核心问题 #

1. 组件渲染逻辑错误：renderDataPopOver函数里仅创建了AddDataPopover组件但未返回，且React不支持在事件处理函数内直接渲染组件，必须通过状态控制显示/隐藏。
2. anchor状态冲突：原anchor状态同时控制Menu的显示，点击MenuItem触发onClose后会将anchor设为null，导致Popover失去锚点无法渲染。

解决步骤 #

1. 重构App组件，拆分Menu与Popover的控制状态

在主组件中单独维护Popover的显示状态和锚点，避免和Menu的状态冲突：

const App = ({ scope }) => {
  const ref = useRef<HTMLButtonElement>(null);

  // 控制Menu显示的状态
  const [menuAnchor, setMenuAnchor] = useState<HTMLButtonElement | null>(null);
  // 控制Popover显示的独立状态
  const [showPopover, setShowPopover] = useState(false);
  const [popoverAnchor, setPopoverAnchor] = useState<HTMLButtonElement | null>(null);
  const [handler, setHandler] = useState<Handler>();

  // 关闭Menu
  const closeMenu = () => {
    setMenuAnchor(null);
  };

  // 关闭Popover
  const closePopover = () => {
    setShowPopover(false);
  };

  const handleClick = () => {
    setMenuAnchor(ref.current);
  };

  // 接收子组件传递的Popover锚点并触发显示
  const handleShowPopover = (anchor: HTMLButtonElement) => {
    setPopoverAnchor(anchor);
    setShowPopover(true);
  };

  return showAdd && handler ? (
    <MessageContainer
      message={'test'}
      actions={
        <Box ml={1}>
          <Button ref={ref} color="primary" variant="contained" onClick={handleClick}>
            {t('Visualization.chart-initial-states.AddColumns')}
          </Button>
          <AddDataMenu 
            handler={handler} 
            anchor={menuAnchor} 
            onClose={closeMenu} 
            onShowPopover={handleShowPopover} 
          />
          {/* 由状态控制Popover的渲染 */}
          <AddDataPopover 
            open={showPopover} 
            anchor={popoverAnchor} 
            onClose={closePopover} 
            handler={handler} 
          />
        </Box>
      }
    />
  ) : (
    <DisplayError />
  );
};
export default App;

2. 修改AddDataMenu组件，传递Popover触发回调

移除无效的renderDataPopOver函数，改为在MenuItem点击时通知父组件显示Popover：

interface Props {
  handler: Handler;
  anchor: HTMLButtonElement | null;
  onClose: () => void;
  // 新增回调，通知父组件显示Popover
  onShowPopover: (anchor: HTMLButtonElement) => void;
}

const AddDataMenu = ({ handler, anchor, onClose, onShowPopover }: Props) => {
  return (
    <div>
      <Menu
        anchorEl={anchor}
        open={Boolean(anchor)}
        onClose={onClose}
        sx={{ width: 320, maxWidth: '100%' }}
      >
        <MenuItem 
          onClick={(e) => {
            // 先关闭Menu，再传递当前MenuItem作为Popover的锚点
            onClose();
            onShowPopover(e.currentTarget);
          }}
        >
          <ListItemIcon>
            <DataIcon />
          </ListItemIcon>
          <Typography>item 1</Typography>
        </MenuItem>
      </Menu>
    </div>
  );
};

export default AddDataMenu;

3. 调整AddDataPopover适配状态控制

确保AddDataPopover接收open属性来控制显示（MUI Popover原生支持该属性）：

const AddDataPopover = ({ open, anchor, onClose, handler }: {
  open: boolean;
  anchor: HTMLButtonElement | null;
  onClose: () => void;
  handler: Handler;
}) => {
  return (
    <Popover
      anchorEl={anchor}
      open={open}
      onClose={onClose}
      sx={{ width: 320, maxWidth: '100%' }}
    >
      {/* 这里写Popover的内容 */}
    </Popover>
  );
};

关键说明 #

• 状态分离：Menu和Popover使用独立的状态变量，彻底避免锚点冲突问题。
• 状态驱动渲染：通过showPopover状态控制Popover的显示/隐藏，符合React的核心渲染逻辑。
• 锚点传递：将MenuItem元素作为Popover的锚点，保证弹出位置的准确性。

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