Antd Popover在react-full-screen全屏模式下失效问题求助

问题场景 #

使用react-full-screen库将容器切换为全屏状态后，Ant Design的Popover组件悬浮层无法正常显示，复现代码如下：

import "./styles.css";
import { Popover } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";

export default function App() {
  const handle = useFullScreenHandle();

  return (
    <div className="App">
      <FullScreen handle={handle}>
        <div className="App__inner">
          <h1>Hello CodeSandbox</h1>
          <button onClick={handle.enter}>Click to FullScreen</button>
          <Popover placement="right" content={<span>tooltip</span>}>
            <button>hover me</button>
          </Popover>
        </div>
      </FullScreen>
    </div>
  );
}

问题原因 #

Ant Design的Popover组件默认会将悬浮层挂载到document.body节点下，但全屏API的元素处于独立的上下文栈中，挂载在body的浮层不会被包含在全屏视图范围内，因此无法显示。

修复方案 #

方案1：指定Popover浮层挂载到全屏容器内

利用Popover的getPopupContainer属性，将浮层渲染到全屏容器内部，确保其处于全屏上下文范围内：

import "./styles.css";
import { Popover } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";
import { useRef } from "react";

export default function App() {
  const handle = useFullScreenHandle();
  const innerContainerRef = useRef(null);

  return (
    <div className="App">
      <FullScreen handle={handle}>
        <div className="App__inner" ref={innerContainerRef}>
          <h1>Hello CodeSandbox</h1>
          <button onClick={handle.enter}>Click to FullScreen</button>
          <Popover 
            placement="right" 
            content={<span>tooltip</span>}
            // 强制浮层挂载到当前全屏容器内
            getPopupContainer={() => innerContainerRef.current}
          >
            <button>hover me</button>
          </Popover>
        </div>
      </FullScreen>
    </div>
  );
}

方案2：调整全屏组件的包裹范围（适用于全局全屏场景）

如果你的需求是整个页面全屏，可以将FullScreen组件直接包裹整个App，这样body下的浮层会被自动包含在全屏视图中：

import "./styles.css";
import { Popover } from "antd";
import { FullScreen, useFullScreenHandle } from "react-full-screen";

export default function App() {
  const handle = useFullScreenHandle();

  return (
    <FullScreen handle={handle}>
      <div className="App">
        <div className="App__inner">
          <h1>Hello CodeSandbox</h1>
          <button onClick={handle.enter}>Click to FullScreen</button>
          <Popover placement="right" content={<span>tooltip</span>}>
            <button>hover me</button>
          </Popover>
        </div>
      </div>
    </FullScreen>
  );
}

注意事项 #

• 方案1更适合局部全屏的场景，不会影响页面其他元素的布局和样式
• 方案2适合全局全屏需求，但需要注意全局样式的适配问题

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