Ant Design Menu组件children属性弃用问题求助

Ant Design v5及以上版本中，Menu组件不再支持通过嵌套<Menu.Item>作为子元素的方式定义菜单项，官方已废弃该用法，要求改用items属性配置，这就是你看到控制台警告的原因。

直接修改你的Navbar组件，把原来的Menu子组件替换为items属性配置即可，修改后的完整代码如下：

import React from 'react';
import { Button, Menu, Typography, Avatar } from 'antd';
import { Link } from 'react-router-dom';
import { HomeOutlined, MoneyCollectOutlined, BulbOutlined, FundOutlined, MenuOutlined } from '@ant-design/icons'
import icon from '../images/cryptocurrency.png'

const Navbar = () => {
  // 定义菜单配置项
  const menuItems = [
    {
      key: 'home',
      icon: <HomeOutlined />,
      label: <Link to="/">Home</Link>
    },
    {
      key: 'cryptocurrencies',
      icon: <FundOutlined />,
      label: <Link to="/cryptocurrencies">Cryptocurrencies</Link>
    },
    {
      key: 'exchanges',
      icon: <MoneyCollectOutlined />,
      label: <Link to="/exchanges">Exchanges</Link>
    },
    {
      key: 'news',
      icon: <BulbOutlined />,
      label: <Link to="/news">News</Link>
    }
  ];

  return (
    <div className='nav-container'>
      <div className='logo-container'>
        <Avatar src={icon} size="large" />
        <Typography.Title level={2} className='logo'>
          <Link to="/">Cryptoverse</Link>
        </Typography.Title>
      </div>

      {/* 使用items属性替代原来的子组件 */}
      <Menu mode="vertical" theme="dark" items={menuItems} />
    </div>
  )
}

export default Navbar

修改要点： #

• 移除了原来嵌套在<Menu>内的所有<Menu.Item>子组件
• 单独定义menuItems数组，每个元素是对应菜单项的配置对象，包含key、icon、label三个核心字段
• 在<Menu>组件上通过items={menuItems}传入配置，完成菜单渲染

这样修改后，控制台的警告就会消失，同时符合Ant Design最新的API规范。

内容的提问来源于stack exchange，提问作者Niharika