如何创建支持嵌套子组件的 Ant Design Menu 通用封装组件-js教程-PHP中文网

如何创建支持嵌套子组件的 Ant Design Menu 通用封装组件

本文教你如何正确封装 Ant Design 的 Menu 组件，使其既保留原生 Menu.Item、Menu.SubMenu、Menu.ItemGroup 等静态子组件能力，又可作为自定义默认导出组件复用。

本文教你如何正确封装 ant design 的 `menu` 组件，使其既保留原生 `menu.item`、`menu.submenu`、`menu.itemgroup` 等静态子组件能力，又可作为自定义默认导出组件复用。

在基于 Ant Design 开发时，为保持 UI 一致性与维护性，常需将第三方组件（如

）封装为项目级通用组件。但简单地用函数组件包裹并透传 items 属性（如仅支持 items 数组写法），会丢失对 JSX 嵌套语法（如、）的支持——因为这些是 Ant Design Menu 类组件内部定义的静态属性，而非独立导出的组件。

要实现「一行导入、全功能可用」的效果，关键在于：将 Ant Design 原生 Menu 的静态子组件（Item、SubMenu、ItemGroup）显式挂载到你封装的 Menu 函数组件上，使其具备与原始 Menu 相同的 API 结构。

以下是推荐的 Menu.js 封装方案：

// src/components/Menu/Menu.js
import React from 'react';
import { Menu as AntMenu } from 'antd';

// 主菜单组件：支持 items 数组模式 & JSX 子元素模式
const Menu = ({ items, ...restProps }) => {
  return <antmenu items="{items}"></antmenu>;
};

// 关键步骤：挂载 Ant Design 原生静态子组件
const { Item, SubMenu, ItemGroup } = AntMenu;
Menu.Item = Item;
Menu.SubMenu = SubMenu;
Menu.ItemGroup = ItemGroup;

export default Menu;

✅ 此后，你可在任意模块中统一导入并使用：

import Menu from '@/components/Menu/Menu';

function Navigation() {
  return (
    <menu mode="horizontal" defaultselectedkeys="{['home']}">
<menu.item key="home">首页</menu.item><menu.submenu key="products" title="产品"><menu.item key="web">Web 应用</menu.item><menu.item key="mobile">移动应用</menu.item></menu.submenu><menu.itemgroup title="资源"><menu.item key="docs">文档</menu.item><menu.item key="github">GitHub</menu.item></menu.itemgroup>
</menu>
  );
}

export default Navigation;

⚠️ 注意事项：

不要尝试解构后单独 export { Item, SubMenu } —— 这会导致 React 渲染时无法识别上下文（Menu.Item 必须是 Menu 的静态属性，以确保其 context 和 displayName 正确）；
若项目使用 TypeScript，建议为 Menu 添加类型声明，继承 AntMenuProps 并扩展静态属性类型；
items 数组模式与 JSX 模式不可混用（Ant Design 官方限制），二者选其一即可：items 用于配置化菜单；JSX 模式用于需要复杂交互或动态渲染子项的场景；
如需增强功能（如权限过滤、图标自动注入、点击埋点），可在 Menu.Item 等子组件外层再封装高阶逻辑，但务必保持挂载链路清晰。