开发时碰到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 函数会暂停。只有当我再次移动鼠标后才会触发。这里可能是原有代码的问题。在此记录下！