javascript - Why getPopupContainer doesn't work correctly in my react app? - Stack Overflow

admin管理员组

文章数量:1287151

I'm getting this warning:

Warning: [antd: Modal] Static function can not consume context like dynamic theme. Please use 'App' ponent instead.

Then, the Modal.confirm() doesn't show correctly because it renders outside of the dependency tree and doesn't inherit the styles.

I'm using react 18.2.0 and antd 5.4.6.

Here I leave the code

main.tsx

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Suspense fallback={<Loader />}>
     <ThemeWrapper>
         <Outlet />
      </ThemeCoWrapper>
  </Suspense>
);

const ThemeWrapper: React.FC<ThemeProps> = ({ children }) => {
  const [theme, setTheme] = useState<any>(defaultTheme);

  const modalContainerRef = useRef<HTMLDivElement>(null);

  return (
    <ConfigProvider
      theme={theme}
      getPopupContainer={() => modalContainerRef.current as HTMLElement}
    >
      <div ref={modalContainerRef}>{children}</div>
    </ConfigProvider>
  );
};

export default ThemeWrapper;

Example of function in which I use the Modal.confirm() inside the wrapper

const onLogout = () => {
    Modal.confirm({
      title: (
        <b>
          {intl.formatMessage({
            id: 'labelCloseSession',
          })}
        </b>
      ),
      content: intl.formatMessage({
        id: 'labelLogoutConfirm',
      }),
      centered: true,
      onOk: async () => {
        try {
          await loginService.logout();
          removeUserSession();
          globalContext.dispatch({
            type: GlobalStateActionType.LOGOUT,
          });
          navigate('/login');
        } catch (error) {}
      },
    });
  };

I tried to use document.getElemetById instead of useRef but it didn't work.

I'm getting this warning:

Warning: [antd: Modal] Static function can not consume context like dynamic theme. Please use 'App' ponent instead.

Then, the Modal.confirm() doesn't show correctly because it renders outside of the dependency tree and doesn't inherit the styles.

I'm using react 18.2.0 and antd 5.4.6.

Here I leave the code

main.tsx

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Suspense fallback={<Loader />}>
     <ThemeWrapper>
         <Outlet />
      </ThemeCoWrapper>
  </Suspense>
);

const ThemeWrapper: React.FC<ThemeProps> = ({ children }) => {
  const [theme, setTheme] = useState<any>(defaultTheme);

  const modalContainerRef = useRef<HTMLDivElement>(null);

  return (
    <ConfigProvider
      theme={theme}
      getPopupContainer={() => modalContainerRef.current as HTMLElement}
    >
      <div ref={modalContainerRef}>{children}</div>
    </ConfigProvider>
  );
};

export default ThemeWrapper;

Example of function in which I use the Modal.confirm() inside the wrapper

const onLogout = () => {
    Modal.confirm({
      title: (
        <b>
          {intl.formatMessage({
            id: 'labelCloseSession',
          })}
        </b>
      ),
      content: intl.formatMessage({
        id: 'labelLogoutConfirm',
      }),
      centered: true,
      onOk: async () => {
        try {
          await loginService.logout();
          removeUserSession();
          globalContext.dispatch({
            type: GlobalStateActionType.LOGOUT,
          });
          navigate('/login');
        } catch (error) {}
      },
    });
  };

I tried to use document.getElemetById instead of useRef but it didn't work.

• javascript
• reactjs
• typescript
• antd

Share Improve this question Follow edited May 2, 2023 at 4:46 programandoconro 2,72922 gold badges2424 silver badges4141 bronze badges asked May 2, 2023 at 2:17 jesusrlmjesusrlm 8322 silver badges88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Because static function in React 18 concurrent mode will not well support. In v5, Antd remends to use hooks for the static replacement (read here). So, you will need to set up your project like what they stated here: https://ant.design/ponents/app#basic-usage

In your case, try:

• For the ThemeWrapper ponent
• import { App } from 'antd';
• And then, wrap the <div> element in <App></App> like:

  <ConfigProvider
       theme={theme}
       getPopupContainer={() => modalContainerRef.current as HTMLElement}
  >
       <App>
           <div ref={modalContainerRef}>{children}</div>
       </App>
  </ConfigProvider>
  

Here, I provide the codesandbox example: https://codesandbox.io/s/text-and-link-ponent-antd-5-0-2-forked-9svf8v?file=/demo.tsx They remend encapsulating App at the top level in the application

After that, you will need to use modal.confirm({}) from App.useApp(); instead of the old Modal.confirm() in your onLogout function.

本文标签： javascriptWhy getPopupContainer doesn39t work correctly in my react appStack Overflow