解決 Ant Design Modal 錯誤訊息: Static function can not consume context like dynamic theme

問題描述

在使用 Ant Design 5.x 時，如果直接使用 Modal.warning() 或其他模态方法，可能會出現下列錯誤訊息:

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

錯誤原因

從 Ant Design 5 開始，Modal 系列給對話相關的模态出現了 Context 依賴性問題，結果不能直接使用靜態出現的模态方法，如 Modal.warning()。而是需要將 App 對話存取出來，使用 App.useApp() 來導入模态出現功能。

解決方式

使用 App.useApp() 從 ConfigProvider 存取出對話功能，此外需確保 ConfigProvider 包裹 App :

import React from 'react';
import { ConfigProvider, App, Button } from 'antd';

const MyComponent = () => {
    const { modal } = App.useApp();
    return (
         <Button onClick={() => modal.warning({title: "彈窗訊息"})}>
            點擊顯示彈窗
         </Button>     
    );
};


const MyApp = () => {
    return(
        <ConfigProvider theme={theme} >
            <App>
                <MyComponent />
            </App>
        </ConfigProvider>
    );
};

export default AppWrapper;