🐛 [BUG] overlay is deprecated. Please use menu instead.

[zhou0322-lab]

用pro脚手架新创建项目会报警告

📷 复现步骤 | Recurrence steps

🏞 期望结果 | Expected results

💻 复现代码 | Recurrence code

© 版本信息

• Ant Design Pro 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

[zhou0322-lab]

用pro脚手架新创建项目会报警告

📷 复现步骤 | Recurrence steps

🏞 期望结果 | Expected results

💻 复现代码 | Recurrence code

© 版本信息

• Ant Design Pro 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

[gaspire]

同样问题

[jianhao2010303]

相同问题

[ming2020]

https://ant.design/components/menu/#API

[ming2020]

自己把overlay改成menu就可以了

[jianhao2010303]

NoticeIcon 这个组件如果使用menu会报错，渲染方式搜改变了。

[EchoNoReturn]

Dropdown也也有这样的报错，而且改成menu也会报错

[AceLing]

问题原因： 使用 Dropdown 组件时产生兼容问题

解决方案： 对照 src/.umi/plugin-locale/SelectLang.tsx 修改 src/components/RightContent/AvatarDropdown.tsx

修改后的 src/components/RightContent/AvatarDropdown.tsx 代码

import { outLogin } from '@/services/ant-design-pro/api';
import { LogoutOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import { history, useModel } from '@umijs/max';
import { Avatar, Menu, version, Dropdown, Spin } from 'antd';
import type { ItemType } from 'antd/es/menu/hooks/useItems';
import { stringify } from 'querystring';
import type { MenuInfo } from 'rc-menu/lib/interface';
import React, { useCallback } from 'react';
import { flushSync } from 'react-dom';
// import HeaderDropdown from '../HeaderDropdown';
import type { DropDownProps } from 'antd/es/dropdown';
import styles from './index.less';

export type GlobalHeaderRightProps = {
  menu?: boolean;
};

export interface HeaderDropdownProps extends DropDownProps {
  overlayClassName?: string;
  placement?:
    | 'bottomLeft'
    | 'bottomRight'
    | 'topLeft'
    | 'topCenter'
    | 'topRight'
    | 'bottomCenter';
}

const HeaderDropdown: React.FC<HeaderDropdownProps> = ({
  overlayClassName: cls,
  ...restProps
}) => (
  <Dropdown
    overlayClassName={cls}
    {...restProps}
  />
);

const AvatarDropdown: React.FC<GlobalHeaderRightProps> = (props) => {
  const {
    menu,
    ...restProps
  } = props;
  /**
   * 退出登录，并且将当前的 url 保存
   */
  const loginOut = async () => {
    await outLogin();
    const { search, pathname } = window.location;
    const urlParams = new URL(window.location.href).searchParams;
    /** 此方法会跳转到 redirect 参数所在的位置 */
    const redirect = urlParams.get('redirect');
    // Note: There may be security issues, please note
    if (window.location.pathname !== '/user/login' && !redirect) {
      history.replace({
        pathname: '/user/login',
        search: stringify({
          redirect: pathname + search,
        }),
      });
    }
  };
  const { initialState, setInitialState } = useModel('@@initialState');

  const onMenuClick = useCallback(
    (event: MenuInfo) => {
      const { key } = event;
      if (key === 'logout') {
        flushSync(() => {
          setInitialState((s) => ({ ...s, currentUser: undefined }));
        });
        loginOut();
        return;
      }
      history.push(`/account/${key}`);
    },
    [setInitialState],
  );

  const loading = (
    <span className={`${styles.action} ${styles.account}`}>
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    </span>
  );

  if (!initialState) {
    return loading;
  }

  const { currentUser } = initialState;

  if (!currentUser || !currentUser.name) {
    return loading;
  }

  const menuItems: ItemType[] = [
    ...(menu
      ? [
          {
            key: 'center',
            icon: <UserOutlined />,
            label: '个人中心',
          },
          {
            key: 'settings',
            icon: <SettingOutlined />,
            label: '个人设置',
          },
          {
            type: 'divider' as const,
          },
        ]
      : []),
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
    },
  ];

  const avatarMenu = {
    selectedKeys: [],
    className: styles.menu,
    onClick: onMenuClick,
    items: menuItems,
  };

  // antd@5 和  4.24 之后推荐使用 menu，性能更好
  const dropdownProps =
    version.startsWith('5.') || version.startsWith('4.24.')
      ? { menu: avatarMenu }
      : { overlay: <Menu {...avatarMenu} /> };

  return (
    <HeaderDropdown {...dropdownProps} placement="bottomRight" {...restProps}>
      <span className={`${styles.action} ${styles.account}`}>
        <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
        <span className={`${styles.name} anticon`}>{currentUser.name}</span>
      </span>
    </HeaderDropdown>
  );
};

export default AvatarDropdown;

[hfpp2012copy]

你全局搜索 overlay 就可以全部清掉，官方也有介绍方法 https://www.qiuzhi99.com/playlists/antdpro-prisma.html

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

是的，全局搜索 overlay 可以找到所有与此相关的代码，并进行修改。在满足 Ant Design Pro 的需求的前提下，可以将 overlay 改为 menu，或采用官方建议的 dropdown 使用方式。

另外，在 Ant Design 官方的更新日志中，也提到遇到类似的问题时需要查看组件的 API 文档，来寻找新的 API 或已经废弃的 API，特别是在进行重大版本更新时。

具体参考链接：

• https://www.qiuzhi99.com/playlists/antdpro-prisma.html
• https://ant.design/changelog-cn#%E9%A1%B9%E7%9B%AE%E6%9B%B4%E6%96%B0-4-0-0-2020-10-10

[ycshill]

我也有这个问题，全局没有overlay；报错事portable

"antd": "^4.24.7", "antd-pro": "^0.7.0", "@ant-design/pro-components": "^1.1.10", ”@ant-design/pro-layout": "^6.38.2",

[chenshuai2144]

@ant-design/pro-components 升级到2.0 就好了