使用antd Popover乱飘

开发时碰到Popover遮挡Modal弹窗，以及当Popover对应元素上方元素改变高度时，Popover位置没有随着元素移动。于是做了如下处理

<Popover
  content={<>11111111</>}
  arrowPointAtCenter
  autoAdjustOverflow
  zIndex={2} // 设置zIndex比Modal低
  open={openPopover}
>
  <Button ref={ref}>
    222222
    <DownOutlined />
  </Button>
</Popover>;


useEffect(() => {
  const ele = document.querySelector(".box") as HTMLElement;
  // .box 这里是代表着Button的父布局
  lastOffsetTop.current = ele.offsetTop;
  // 关键代码，通过 requestAnimationFrame+throttle 重新设置 Popover 隐藏->显示
  const checkOffsetTop = _.throttle(() => {
    const currentTop = ele.offsetTop;
    if (currentTop !== lastOffsetTop.current) {
      lastOffsetTop.current = currentTop;
      setOpenPopover(false);
      setOpenPopover(true);
    }
    rafId.current = requestAnimationFrame(checkOffsetTop);
  }, 200);

  rafId.current = requestAnimationFrame(checkOffsetTop);

  return () => {
    if (rafId.current) {
      cancelAnimationFrame(rafId.current);
    }
  };
}, []);

这里为什么用 requestAnimationFrame 而不用 MutationObserver 。因为出现了一个现象，当我使用 MutationObserver 时，鼠标没有移动，或者说当我改变了上方元素高度后不再操作，checkOffsetTop 函数会暂停。只有当我再次移动鼠标后才会触发。这里可能是原有代码的问题。在此记录下！