定制后的Antd弹窗无法关闭

定制过 prefixCls 的 Antd 弹窗组件方法无法关闭

最近项目中由于 antd 的 PageHeader组件在页面跳转时报类似在卸载的组件中执行 setstate 操作, 从头4.17.2升到最
4.22.5。发现一个问题: 使用 JS 打开 Modal 之后就再也关不掉了, 如下:

const modal = Modal.confirm({
  prefixCls: '不方便透露',
  title: '确认交付',
  content: '不方便透露',
  okText: '交付',
  okType: 'primary',
  cancelText: '取消',
  okButtonProps: {
    prefixCls: '不方便透露',
  },
  cancelButtonProps: {
    prefixCls: '不方便透露',
  },
  centered: true,
  onOk: async () => {
    await Promise.resolve();
    modal.destroy();
  },
  onCancel: () => {
    modal.destroy();
  },
});

通过 debug 找到解决方案如下:

import { ConfigProvider } from 'antd';

ConfigProvider.config({
  prefixCls: 'xxxx',
});

建议 antd 团队在文档中进行说明, 提高用户开发效率。

posted @ 2022-08-18 15:37  xvivx  阅读(1059)  评论(0编辑  收藏  举报