如何封装Antd Menu公共组件并支持Menu.Item等子组件调用？

你需要把Antd原生Menu的子组件挂载到自定义Menu组件的属性上，而非单独导出。因为Antd的Menu.Item、Menu.SubMenu这些是作为Menu组件的静态属性存在的，自定义组件要复刻这个结构才能保持原生使用习惯。

修改后的Menu.js代码如下：

import React from 'react';
import { Menu as AntMenu } from 'antd';

// 定义自定义Menu组件
const Menu = ({ items, ...extraAttributes }) => {
  return (
    <AntMenu
      items={items}
      {...extraAttributes}
    />
  );
};

// 将Antd Menu的子组件挂载到自定义Menu上
Menu.Item = AntMenu.Item;
Menu.SubMenu = AntMenu.SubMenu;
Menu.ItemGroup = AntMenu.ItemGroup;

export default Menu;

业务组件中使用方式 #

现在你可以在业务代码里直接导入自定义Menu，完全按照原生Antd Menu的方式调用子组件：

import Menu from './Menu';

const App = () => {
  return (
    <Menu mode="vertical">
      <Menu.Item key="1">菜单项1</Menu.Item>
      <Menu.SubMenu key="sub1" title="子菜单">
        <Menu.Item key="2">子菜单项1</Menu.Item>
      </Menu.SubMenu>
      <Menu.ItemGroup key="group1" title="菜单项组">
        <Menu.Item key="3">组内项1</Menu.Item>
      </Menu.ItemGroup>
    </Menu>
  );
};

export default App;

为什么之前的方法无效 #

你之前单独导出SubMenu、Item的方式，要求业务代码单独导入这些子组件（比如import { Menu, Item } from './Menu'），这和原生Antd的使用逻辑不符。而把它们挂载到自定义Menu的属性上，就能完全对齐原生API的使用方式，保持代码一致性。

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