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

最终解决方案：

第一种写法，在组件内

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

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

/** 用户个人信息查看模态框 */
const UserInfoModal = (props: { innerRef: Ref<RefProps> }) => {
  const {message} = App.useApp();
  const [visible, setVisible] = useState(false);
  const [alias,setAlias] = useState("")
  /**
   * 通过useImperativeHandle的Hook, 
   * 将父组件传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起
   * 所以在父组件中, 调用inputRef.current时, 实际上是返回的对象
   * useImperativeHandle使用简单总结:
   * 作用: 减少暴露给父组件获取的DOM元素属性, 只暴露给父组件需要用到的DOM方法
   * 参数1: 父组件传递的ref属性
   * 参数2: 返回一个对象, 以供给父组件中通过ref.current调用该对象中的方法
   */
  useImperativeHandle(props.innerRef, () => ({
    showModal,
  }));

  const handleOk = () => {
    setVisible(false)
    message.success(`${alias}修改个人信息成功 🎉🎉🎉`)
  }

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

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

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

/**用App组件包裹一下上面的组件再导出，这种方式很蠢很烦*/
const UserInfoModalApp: FC<{innerRef: Ref<RefProps> }> = ({innerRef}) => (
  <App>
    <UserInfoModal innerRef={innerRef}/>
  </App>
);

export default UserInfoModalApp;

第二种写法，在entry文件main.tsx中写，App组件位于ConfigProvider的下面，但是App组件要包裹路由组件！！！

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 后，将默认使用 v5 的主题，以下是将配置主题示例：
ConfigProvider.config({
  theme: {
    primaryColor: "#2F6FFF",
  },
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <ConfigProvider
    locale={zhCN}
    theme={{
      token: {
        colorPrimary: "orange",
      },
      components: {
        // 修改单个组件的主色而不影响其他的UI组件
        Radio: {
          colorPrimary: "#00b96b",
        },
      },
      // algorithm: theme.darkAlgorithm, // 暗黑算法
      algorithm: theme.defaultAlgorithm, // 默认算法
      // algorithm: theme.compactAlgorithm, // 紧凑算法
    }}
  >
    {/* 很诡异的一个组件，包裹组件 地址：https://ant.design/components/app-cn#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8*/}
    <App>
      <RouterConfig />
    </App>
  </ConfigProvider>
);