IVLIU / react-offscreen

react offscreen component like vue keep-alive
MIT License
107 stars 8 forks source link

与antd5配合使用,从离屏切换到前台,挂载的popup内容都会闪烁一下 #5

Open minisola opened 6 months ago

minisola commented 6 months ago

例如使用select组件时,先点击激活一下select,再toggle离屏后重新切换回来,select的弹出框都会闪烁一下,不知道应该如何处理

在sample里加入select就可以复现,详情可看 https://codesandbox.io/p/sandbox/nameless-paper-l884x2?file=%2Fsrc%2FApp.tsx

IVLIU commented 6 months ago
image

如图下拉框的dom,是不在Offscreen作用域下的,可以设置getPopupContainer属性来使得其置于Offscreen作用域内

minisola commented 6 months ago

我尝试了设置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>
  );
}