feat: Support custom rendering

README.md

@@ -199,6 +199,12 @@ ReactDOM.render(
             <th>() => document.body</th>
             <td>Where to render the DOM node of popup menu when the mode is horizontal or vertical</td>
         </tr>
+        <tr>
+            <td>itemRender</td>
+            <td>Function(originNode:React.ReactNode, item:ItemType) => React.ReactNode</td>
+            <th>() => originNode</th>
+            <td>Customize the rendering of menu item</td>
+        </tr>
         <tr>
             <td>builtinPlacements</td>
             <td>Object of alignConfigs for <a href="https://github.com/yiminghe/dom-align">dom-align</a></td>

docs/examples/items.tsx

@@ -6,13 +6,32 @@ import '../../assets/index.less';
 
 export default () => (
   <Menu
+    itemRender={(originNode, { item }) => {
+      if (item.type === 'item') {
+        return (
+          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+            {originNode}
+          </a>
+        );
+      }
+      return originNode;
+    }}
     items={[
       {
         // MenuItem
         label: 'Top Menu Item',
         key: 'top',
         extra: '⌘B',
       },
+      {
+        key: 'ToOriginNode',
+        type: 'item',
+        label: 'Navigation Two',
+      },
+      {
+        key: 'ToOriginNode1',
+        label: 'SubMenu',
+      },
       {
         // MenuGroup
         type: 'group',

src/Divider.tsx

@@ -3,18 +3,36 @@ import { clsx } from 'clsx';
 import { MenuContext } from './context/MenuContext';
 import { useMeasure } from './context/PathContext';
 import type { MenuDividerType } from './interface';
+import { useFullPath } from './context/PathContext';
 
 export type DividerProps = Omit<MenuDividerType, 'type'>;
 
-export default function Divider({ className, style }: DividerProps) {
-  const { prefixCls } = React.useContext(MenuContext);
+export default function Divider(props: DividerProps) {
+  const { className, style, itemRender: propItemRender } = props;
+  const { prefixCls, itemRender: contextItemRender } = React.useContext(MenuContext);
   const measure = useMeasure();
+  const connectedKeyPath = useFullPath();
 
   if (measure) {
     return null;
   }
 
-  return (
-    <li role="separator" className={clsx(`${prefixCls}-item-divider`, className)} style={style} />
+  const renderNode = (
+    <li
+      role="separator"
+      className={clsx(`${prefixCls}-item-divider`, className)}
+      style={style}
+    />
   );
+
+  const mergedItemRender = propItemRender || contextItemRender;
+
+  if (typeof mergedItemRender === 'function') {
+    return mergedItemRender(renderNode, {
+      item: { type: 'divider', ...props },
+      keys: connectedKeyPath,
+    });
+  }
+
+  return renderNode;
 }

src/Menu.tsx

@@ -28,9 +28,11 @@ import type {
   SelectInfo,
   TriggerSubMenuAction,
   PopupRender,
+  ItemRenderType,
 } from './interface';
 import MenuItem from './MenuItem';
-import SubMenu, { SemanticName } from './SubMenu';
+import type { SemanticName } from './SubMenu';
+import SubMenu from './SubMenu';
 import { parseItems } from './utils/nodeUtil';
 import { warnItemProp } from './utils/warnUtil';
 
@@ -157,6 +159,8 @@ export interface MenuProps
   _internalComponents?: Components;
 
   popupRender?: PopupRender;
+
+  itemRender?: ItemRenderType;
 }
 
 interface LegacyMenuProps extends MenuProps {
@@ -242,6 +246,8 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     _internalComponents,
 
     popupRender,
+
+    itemRender,
     ...restProps
   } = props as LegacyMenuProps;
 
@@ -253,7 +259,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
       parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls),
       parseItems(children, items, EMPTY_LIST, {}, prefixCls),
     ],
-    [children, items, _internalComponents],
+    [children, items, _internalComponents, prefixCls],
   );
 
   const [mounted, setMounted] = React.useState(false);
@@ -652,6 +658,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
           onItemClick={onInternalClick}
           onOpenChange={onInternalOpenChange}
           popupRender={popupRender}
+          itemRender={itemRender}
         >
           <PathUserContext.Provider value={pathUserContext}>{container}</PathUserContext.Provider>
 

src/MenuItem.tsx

@@ -12,7 +12,7 @@ import PrivateContext from './context/PrivateContext';
 import useActive from './hooks/useActive';
 import useDirectionStyle from './hooks/useDirectionStyle';
 import Icon from './Icon';
-import type { MenuInfo, MenuItemType } from './interface';
+import type { MenuInfo, MenuItemType, ItemType } from './interface';
 import { warnItemProp } from './utils/warnUtil';
 
 export interface MenuItemProps
@@ -89,6 +89,8 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
 
     onFocus,
 
+    itemRender: propItemRender,
+
     ...restProps
   } = props;
 
@@ -109,8 +111,12 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
 
     // Active
     onActive,
+
+    itemRender: contextItemRender,
   } = React.useContext(MenuContext);
 
+  const mergedItemRender = propItemRender || contextItemRender;
+
   const { _internalRenderMenuItem } = React.useContext(PrivateContext);
 
   const itemCls = `${prefixCls}-item`;
@@ -198,7 +204,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
     optionRoleProps['aria-selected'] = selected;
   }
 
-  let renderNode = (
+  let renderNode: React.ReactElement = (
     <LegacyMenuItem
       ref={legacyMenuItemRef}
       elementRef={mergedEleRef}
@@ -238,6 +244,16 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
     </LegacyMenuItem>
   );
 
+  if (typeof mergedItemRender === 'function') {
+    renderNode = mergedItemRender(renderNode, {
+      item: {
+        type: 'item',
+        ...props,
+      } as ItemType,
+      keys: connectedKeys,
+    }) as React.ReactElement;
+  }
+
   if (_internalRenderMenuItem) {
     renderNode = _internalRenderMenuItem(renderNode, props, { selected });
   }

src/MenuItemGroup.tsx

@@ -3,7 +3,7 @@ import omit from '@rc-component/util/lib/omit';
 import * as React from 'react';
 import { MenuContext } from './context/MenuContext';
 import { useFullPath, useMeasure } from './context/PathContext';
-import type { MenuItemGroupType } from './interface';
+import type { MenuItemGroupType, ItemType } from './interface';
 import { parseChildren } from './utils/commonUtil';
 
 export interface MenuItemGroupProps extends Omit<MenuItemGroupType, 'type' | 'children' | 'label'> {
@@ -52,18 +52,28 @@ const InternalMenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps
 });
 
 const MenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps>((props, ref) => {
-  const { eventKey, children } = props;
+  const { eventKey, children, itemRender: propItemRender } = props;
   const connectedKeyPath = useFullPath(eventKey);
   const childList: React.ReactElement[] = parseChildren(children, connectedKeyPath);
+  const { itemRender: contextItemRender } = React.useContext(MenuContext);
 
   const measure = useMeasure();
   if (measure) {
     return childList as any as React.ReactElement;
   }
 
+  const mergedItemRender = propItemRender || contextItemRender;
   return (
     <InternalMenuItemGroup ref={ref} {...omit(props, ['warnKey'])}>
-      {childList}
+      {typeof mergedItemRender === 'function'
+        ? mergedItemRender(childList, {
+            item: {
+              type: 'group',
+              ...props,
+            } as ItemType,
+            keys: connectedKeyPath,
+          })
+        : childList}
     </InternalMenuItemGroup>
   );
 });

src/SubMenu/index.tsx

@@ -4,7 +4,7 @@ import Overflow from 'rc-overflow';
 import warning from '@rc-component/util/lib/warning';
 import SubMenuList from './SubMenuList';
 import { parseChildren } from '../utils/commonUtil';
-import type { MenuInfo, SubMenuType, PopupRender } from '../interface';
+import type { MenuInfo, SubMenuType, PopupRender, ItemType } from '../interface';
 import MenuContextProvider, { MenuContext } from '../context/MenuContext';
 import useMemoCallback from '../hooks/useMemoCallback';
 import PopupTrigger from './PopupTrigger';
@@ -384,7 +384,7 @@ const InternalSubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, re
 });
 
 const SubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, ref) => {
-  const { eventKey, children } = props;
+  const { eventKey, children, itemRender } = props;
 
   const connectedKeyPath = useFullPath(eventKey);
   const childList: React.ReactElement[] = parseChildren(children, connectedKeyPath);
@@ -406,12 +406,24 @@ const SubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, ref) => {
   let renderNode: React.ReactNode;
 
   // ======================== Render ========================
+
+  const childListNode =
+    typeof itemRender === 'function'
+      ? itemRender(childList, {
+          item: {
+            type: 'submenu',
+            ...props,
+          } as ItemType,
+          keys: connectedKeyPath,
+        })
+      : childList;
+
   if (measure) {
-    renderNode = childList;
+    renderNode = childListNode;
   } else {
     renderNode = (
       <InternalSubMenu ref={ref} {...props}>
-        {childList}
+        {childListNode}
       </InternalSubMenu>
     );
   }

src/context/MenuContext.tsx

@@ -9,6 +9,7 @@ import type {
   RenderIconType,
   TriggerSubMenuAction,
   PopupRender,
+  ItemRenderType,
 } from '../interface';
 import { SubMenuProps } from '..';
 
@@ -53,6 +54,8 @@ export interface MenuContextProps {
 
   popupRender?: PopupRender;
 
+  itemRender?: ItemRenderType;
+
   // Icon
   itemIcon?: RenderIconType;
   expandIcon?: RenderIconType;

src/interface.ts

@@ -6,6 +6,7 @@ interface ItemSharedProps {
   ref?: React.Ref<HTMLLIElement | null>;
   style?: React.CSSProperties;
   className?: string;
+  itemRender?: ItemRenderType;
 }
 
 export interface SubMenuType extends ItemSharedProps {
@@ -140,3 +141,8 @@ export type PopupRender = (
   node: React.ReactElement,
   info: { item: SubMenuProps; keys: string[] },
 ) => React.ReactNode;
+
+export type ItemRenderType = (
+  node: React.ReactElement | React.ReactElement<any, string | React.JSXElementConstructor<any>>[],
+  info: { item: ItemType; keys: string[] },
+) => React.ReactNode | React.ReactElement;

src/utils/commonUtil.ts

@@ -13,7 +13,10 @@ export function parseChildren(children: React.ReactNode | undefined, keyPath: st
         eventKey = `tmp_key-${[...keyPath, index].join('-')}`;
       }
 
-      const cloneProps = { key: eventKey, eventKey } as any;
+      const cloneProps = {
+        key: eventKey,
+        eventKey,
+      } as any;
 
       if (process.env.NODE_ENV !== 'production' && emptyKey) {
         cloneProps.warnKey = true;

src/utils/nodeUtil.tsx

@@ -51,9 +51,7 @@ function convertItemsToNodes(
         return (
           <MergedMenuItem key={mergedKey} {...restProps} extra={extra}>
             {label}
-            {(!!extra || extra === 0) && (
-              <span className={`${prefixCls}-item-extra`}>{extra}</span>
-            )}
+            {(!!extra || extra === 0) && <span className={`${prefixCls}-item-extra`}>{extra}</span>}
           </MergedMenuItem>
         );
       }

tests/MenuItem.spec.tsx

@@ -228,5 +228,40 @@ describe('MenuItem', () => {
 
       expect(container.querySelector('li')).toMatchSnapshot();
     });
+
+    it('should wrap originNode with custom render', () => {
+      const { container } = render(
+        <Menu
+          itemRender={(originNode, { item }) => {
+            if (item.type === 'item') {
+              return (
+                <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
+                  {originNode}
+                </a>
+              );
+            }
+            return originNode;
+          }}
+          items={[
+            {
+              key: 'mail',
+              type: 'item',
+              label: 'Navigation One',
+            },
+            {
+              key: 'app',
+              label: 'Navigation Two',
+            },
+            {
+              key: 'upload',
+              label: 'Upload File',
+            },
+          ]}
+        />,
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toHaveAttribute('href', 'https://ant.design');
+    });
   });
 });