react-offscreen
react-offscreen copied to clipboard
与antd5配合使用,从离屏切换到前台,挂载的popup内容都会闪烁一下
例如使用select组件时,先点击激活一下select,再toggle离屏后重新切换回来,select的弹出框都会闪烁一下,不知道应该如何处理
在sample里加入select就可以复现,详情可看 https://codesandbox.io/p/sandbox/nameless-paper-l884x2?file=%2Fsrc%2FApp.tsx
我尝试了设置getPopupContainer让它挂载到上级节点,保证他可以作用域下,但是并没有作用,是我理解有误吗? https://codesandbox.io/p/sandbox/nameless-paper-l884x2?file=%2Fsrc%2FApp.tsx%3A37%2C46
import { useState } from "react";
import { Offscreen } from "./OffScreen";
import { Select, ConfigProvider } from "antd";
import "./styles.css";
function Counter() {
const [count, setCount] = useState(0);
return (
<ConfigProvider
getPopupContainer={(triggerNode) => {
if (triggerNode) {
return triggerNode.parentNode as HTMLElement;
}
return document.body;
}}
>
count: {count}
<Select
options={[
{
label: "a",
value: "a",
},
]}
/>
<button onClick={() => setCount((count) => count + 1)}>add</button>
</ConfigProvider>
);
}
export default function App() {
const [show, setShow] = useState(true);
return (
<div>
<button onClick={() => setShow((show) => !show)}>Toggle</button>
<p>无 OffScreen</p>
{show && <Counter />}
<p>有 OffScreen</p>
<Offscreen mode={show ? "visible" : "hidden"}>
<div className="popup-container">
<Counter />
</div>
</Offscreen>
</div>
);
}