🐛[BUG] Warning: [antd: ***] `overlay` is deprecated. Please use `menu` instead.

[hrjoyce1990]

🐛 bug 描述

更新ant 4.24.0后，pro-components里的组件需要更新新的api。 Warning: [antd: Dropdown] overlay is deprecated. Please use menu instead. Warning: [antd: Breadcrumb.Item] overlay is deprecated. Please use menu instead.

🏞 期望结果

更新新版本antd的API

© 版本信息

• antd 版本: 4.24.0
• ProComponents 版本: 2.3.28

🚑 其他信息

[fantasy525]

same error +1 "@ant-design/pro-components": "^2.3.13", "antd": "^4.23.3",

[fantasy525]

@PluLongzhu I think it's umi's bug;

[hastings0714]

same error +1

[hastings0714]

"@ant-design/pro-form": "^1.74.7", "@ant-design/pro-layout": "^6.38.22", "@ant-design/pro-list": "^1.21.87", "@ant-design/pro-table": "^2.80.8", "antd": "^4.24.1",

[webskyer]

@PluLongzhu I think it's umi's bug;

Same question, agree

[Loomark]

+1, 不想退版本, 官方快来看看哎

[estack]

+1

[adw2022]

+1

[lovewaner]

+1

[songmingm]

same error + 1

[tailoc-hcmus]

same error + 1

[varManWai]

same error + 1

[tnduc]

same error + 1

[zhou0322-lab]

same error + 1

[ant-caichu]

+1 The same error for ant-design-pro 6.0.0-beta.1

[mirai027]

🐛 bug 描述

更新ant 4.24.0后，pro-components里的组件需要更新新的api。 Warning: [antd: Dropdown] overlay is deprecated. Please use menu instead. Warning: [antd: Breadcrumb.Item] overlay is deprecated. Please use menu instead.

🏞 期望结果

更新新版本antd的API

© 版本信息

• antd 版本: 4.24.0
• ProComponents 版本: 2.3.28

🚑 其他信息

根据这个改一下 https://ant.design/components/dropdown-cn/#4.24.0-%E7%94%A8%E6%B3%95%E5%8D%87%E7%BA%A7

// >=4.24.0 可用，推荐的写法 ✅
const items = [
  { label: '菜单项一', key: 'item-1' }, // 菜单项务必填写 key
  { label: '菜单项二', key: 'item-2' },
];
return (
  <Dropdown menu={{ items }}>
    <a>Hover me</a>
  </Dropdown>
);

[zhou0322-lab]

有一些是内置的，改都改不了

[chen-jianpeng]

same error + 1

[tlugowski]

same error +1

[xXAvoraXx]

same error

[269378737]

same error +1

[zran-20]

same error +1

[handycode]

same error +1

+1 看来内置的组件 还没有来得及改

[fschenkun22]

same error antd ver5.0.2 react_devtools_backend.js:4026 Warning: [antd: Dropdown] overlay is deprecated. Please use menu instead.

[xixichensh]

same error + 1 不更新就不要开发布会吹牛逼

[chenshuai2144]

fix in b03d0ad67

[lilililee]

fix in b03d0ad

@chenshuai2144 请问这个修复版本发布了吗？我用的最新的版本依旧有 "@ant-design/pro-components": "2.3.39", "antd": "5.0.3",

[yuyihan666]

same error + 1

[youkimm]

same error + 1

[is-cool]

same error + 1; "@ant-design/pro-layout": "^7.4.0; "antd": "^4.24.1"

[kakuilan]

same error + 1; "@ant-design/pro-layout": 6.38.22; "antd": 4.24.4; "umi": 3.5.35

Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead. 
    at Dropdown (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_dropdown_dropdown-button_js-node_modules_antd_es_dropdown_dropdown_js.1a95aeb5.async.js:268:62)
    at HeaderDropdown (http://localhost:8000/umi.js:2971:18)
    at SelectLang (http://localhost:8000/umi.js:3329:35)
    at div
    at Item (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_dropdown_dropdown-button_js-node_modules_antd_es_dropdown_dropdown_js.1a95aeb5.async.js:433:24)
    at div
    at Space (http://localhost:8000/mf-dep_vendors-node_modules_antd_es_dropdown_dropdown-button_js-node_modules_antd_es_dropdown_dropdown_js.1a95aeb5.async.js:531:62)
    at GlobalHeaderRight (http://localhost:8000/umi.js:6037:64)

貌似是umi的SelectLang多语言选择

[chenshuai2144]

It has been fixed in UMI and it is possible to upgrade to the latest version of UMI

[is-cool]

It has been fixed in UMI and it is possible to upgrade to the latest version of UMI

pro-layout 大概什么时候修复啊

[usamaahmed97]

For those who are having trouble using overlay, you may use the following:

export const items = [ { label: "View Profile", key: "view-profile", }, ];

const handleClick = (e) => { console.log(e.key); };

<Dropdown
        menu={{
          onClick: handleClick,
          items: items,
        }}

      >
        <a>
          <Space>
            <DownOutlined />
          </Space>
        </a>
 </Dropdown>

`

[rkmdCodes]

hi @usamaahmed97 , can you help me how to remove overlay and use it when Menu component is passed as prop like , anyone if can help me in this i have tried everything but non seems to work

<Dropdown overlay={

{TimeItems.map((item) => ( {item.name} ))}

            }
        >
            <Button>{selectedTime.name}</Button>
        </Dropdown>

[kaindy7633]

+1 "antd": "4.24.1", "@ant-design/pro-components": "^2.3.30",

[fogjoe]

antd 5.6.1 same error + 1, the higher antd version isn't compatible with the lower? And what's your design concept and why do you design in this way?

[tbanj]

@webskyer thanks it works

[Maria210194]

this should work:

<Dropdown menu={{ onClick: timeMenuItemOnChangeHandler, items: TimeItems, }}