Antd Menu组件children属性弃用警告问题求助（附代码）

问题场景 #

项目侧边栏使用Antd Menu组件时触发警告：

Warning: [antd: Menu] children will be removed in next major version. Please use items instead.

修改后的完整代码 #

/* eslint-disable react-hooks/exhaustive-deps */
import { Layout, Menu, MenuProps } from 'antd';
import '../../../styles/sidebar/index.scss';
import { FunctionComponent, useContext, useEffect, useState } from 'react';
import _ from 'lodash';
import { FormattedMessage } from 'react-intl';
import { AuthContext, IAuthContext } from '../../../contexts/auth-context';
import { useCurrentPath } from '../../../utils/use-current-path';

const { Sider } = Layout;

export interface MenuChildItem {
    path: string;
    title: string;
    link: string;
    icon: JSX.Element;
}
export interface MenuItemConfig {
    title: string;
    link: string;
    children?: MenuChildItem[];
    permissions?: string[];
}
export interface SideBarProps {
    header?: any;
    footer?: JSX.Element | string;
    MenuItems: MenuItemConfig[];
    collapsed?: boolean;
    onChange: (link: string) => void;
}

const SideBar: FunctionComponent<SideBarProps> = (props) => {
    const authContext = useContext<IAuthContext>(AuthContext);
    const currentPath = useCurrentPath();
    const [selectedKey, setSelectedKey] = useState<string>('');
    const [menuItems, setMenuItems] = useState<MenuProps['items']>([]);

    useEffect(() => {
        // 过滤有权限的菜单并转换为Antd Menu所需的items格式
        const filteredAndFormattedItems = props.MenuItems.filter(item => {
            // 检查权限
            const hasPermission = !item.permissions || item.permissions.some(per => 
                authContext.actions.hasMainPermission(per)
            );
            // 设置初始选中项
            if (hasPermission && currentPath?.includes(item.link)) {
                setSelectedKey(item.link);
            }
            return hasPermission;
        }).map<MenuProps['items'][number]>(item => {
            // 处理子菜单
            if (item.children && !_.isEmpty(item.children)) {
                return {
                    key: item.link,
                    title: <FormattedMessage id={item.title} />,
                    type: 'sub',
                    children: item.children.map(child => ({
                        key: child.link,
                        title: <FormattedMessage id={child.title} />,
                        onClick: () => {
                            setSelectedKey(child.link);
                            props.onChange(child.link);
                        }
                    }))
                };
            }
            // 处理一级菜单
            return {
                key: item.link,
                title: <FormattedMessage id={item.title} />,
                onClick: () => {
                    setSelectedKey(item.link);
                    props.onChange(item.link);
                }
            };
        });

        setMenuItems(filteredAndFormattedItems);
    }, []);

    return (
        <div>
            <Sider
                className='site-layout-background'
                collapsed={props.collapsed}
            >
                <Menu mode='inline' selectedKeys={[selectedKey]} items={menuItems} />
            </Sider>
        </div>
    );
};
export default SideBar;

关键修改说明 #

• 弃用SubMenu直接渲染：改用Antd Menu的items配置，通过type: 'sub'定义子菜单，符合新API规范
• 优化选中项key逻辑：将原索引key替换为菜单link值，避免索引变动导致的选中状态异常，更贴合业务逻辑
• 重构菜单数据转换：把原直接渲染children的逻辑，转换为生成符合MenuProps['items']类型的数组，通过items属性传递给Menu组件
• 简化选中状态设置：在菜单过滤阶段直接匹配当前路径设置选中key，逻辑更清晰
• 类型定义优化：调整接口命名并引入MenuProps类型，增强代码类型安全性

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