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

image.png

image.png

image.png

官方地址：https://ant.design/components/app-cn#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8

最終解決方案：

第一種寫法，在組件內(nèi)

import { App, Modal } from "antd";
import { FC, Ref, useImperativeHandle, useState } from "react";

export interface RefProps {
  showModal: (params: any) => void | undefined;
}

/** 用戶個(gè)人信息查看模態(tài)框 */
const UserInfoModal = (props: { innerRef: Ref<RefProps> }) => {
  const {message} = App.useApp();
  const [visible, setVisible] = useState(false);
  const [alias,setAlias] = useState("")
  /**
   * 通過useImperativeHandle的Hook, 
   * 將父組件傳入的ref和useImperativeHandle第二個(gè)參數(shù)返回的對象綁定到了一起
   * 所以在父組件中, 調(diào)用inputRef.current時(shí), 實(shí)際上是返回的對象
   * useImperativeHandle使用簡單總結(jié):
   * 作用: 減少暴露給父組件獲取的DOM元素屬性, 只暴露給父組件需要用到的DOM方法
   * 參數(shù)1: 父組件傳遞的ref屬性
   * 參數(shù)2: 返回一個(gè)對象, 以供給父組件中通過ref.current調(diào)用該對象中的方法
   */
  useImperativeHandle(props.innerRef, () => ({
    showModal,
  }));

  const handleOk = () => {
    setVisible(false)
    message.success(`${alias}修改個(gè)人信息成功 ??????`)
  }

  const handleCancel = () => {
    setVisible(false)
  }

  const showModal = (params: { name: string }) => {
    setAlias(params.name)
    setVisible(true);
  };

  return (
    <Modal
      title="個(gè)人信息"
      open={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      destroyOnClose={true}
    >
      <p>Some Info111...</p>
      <p>Some Info222...</p>
      <p>Some Info333...</p>
    </Modal>
  );
};

/**用App組件包裹一下上面的組件再導(dǎo)出，這種方式很蠢很煩*/
const UserInfoModalApp: FC<{innerRef: Ref<RefProps> }> = ({innerRef}) => (
  <App>
    <UserInfoModal innerRef={innerRef}/>
  </App>
);

export default UserInfoModalApp;

第二種寫法，在entry文件main.tsx中寫，App組件位于ConfigProvider的下面，但是App組件要包裹路由組件?。。?/p>

import ReactDOM from "react-dom/client";
import { ConfigProvider, theme, App } from "antd";
import zhCN from "antd/locale/zh_CN";
import RouterConfig from "@/routes/renderRouter";
// 通過在 ConfigProvider 中傳入 theme，可以配置主題。在升級 v5 后，將默認(rèn)使用 v5 的主題，以下是將配置主題示例：
ConfigProvider.config({
  theme: {
    primaryColor: "#2F6FFF",
  },
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <ConfigProvider
    locale={zhCN}
    theme={{
      token: {
        colorPrimary: "orange",
      },
      components: {
        // 修改單個(gè)組件的主色而不影響其他的UI組件
        Radio: {
          colorPrimary: "#00b96b",
        },
      },
      // algorithm: theme.darkAlgorithm, // 暗黑算法
      algorithm: theme.defaultAlgorithm, // 默認(rèn)算法
      // algorithm: theme.compactAlgorithm, // 緊湊算法
    }}
  >
    {/* 很詭異的一個(gè)組件，包裹組件 地址：https://ant.design/components/app-cn#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8*/}
    <App>
      <RouterConfig />
    </App>
  </ConfigProvider>
);