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

@@ -6,19 +6,25 @@ import type { MenuDividerType } from './interface';
 
 export type DividerProps = Omit<MenuDividerType, 'type'>;
 
-export default function Divider({ className, style }: DividerProps) {
+export default function Divider({ className, style, itemRender }: DividerProps) {
   const { prefixCls } = React.useContext(MenuContext);
   const measure = useMeasure();
 
   if (measure) {
     return null;
   }
 
-  return (
+  const renderNode = (
     <li
       role="separator"
       className={classNames(`${prefixCls}-item-divider`, className)}
       style={style}
     />
   );
+
+  if (typeof itemRender === 'function') {
+    return itemRender(renderNode);
+  }
+
+  return renderNode;
 }

src/Menu.tsx

@@ -30,7 +30,8 @@ import type {
   PopupRender,
 } 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 +158,8 @@ export interface MenuProps
   _internalComponents?: Components;
 
   popupRender?: PopupRender;
+
+  itemRender?: (originNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactNode;
 }
 
 interface LegacyMenuProps extends MenuProps {
@@ -242,6 +245,8 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     _internalComponents,
 
     popupRender,
+
+    itemRender,
     ...restProps
   } = props as LegacyMenuProps;
 
@@ -250,10 +255,10 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     measureChildList: React.ReactElement[],
   ] = React.useMemo(
     () => [
-      parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls),
-      parseItems(children, items, EMPTY_LIST, {}, prefixCls),
+      parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls, itemRender),
+      parseItems(children, items, EMPTY_LIST, {}, prefixCls, itemRender),
     ],
-    [children, items, _internalComponents],
+    [children, items, _internalComponents, prefixCls],
   );
 
   const [mounted, setMounted] = React.useState(false);

src/MenuItem.tsx

@@ -89,6 +89,8 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
 
     onFocus,
 
+    itemRender,
+
     ...restProps
   } = props;
 
@@ -238,6 +240,10 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref<
     </LegacyMenuItem>
   );
 
+  if (typeof itemRender === 'function') {
+    renderNode = itemRender(renderNode);
+  }
+
   if (_internalRenderMenuItem) {
     renderNode = _internalRenderMenuItem(renderNode, props, { selected });
   }

src/MenuItemGroup.tsx

@@ -52,7 +52,7 @@ const InternalMenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps
 });
 
 const MenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps>((props, ref) => {
-  const { eventKey, children } = props;
+  const { eventKey, children, itemRender } = props;
   const connectedKeyPath = useFullPath(eventKey);
   const childList: React.ReactElement[] = parseChildren(children, connectedKeyPath);
 
@@ -63,7 +63,7 @@ const MenuItemGroup = React.forwardRef<HTMLLIElement, MenuItemGroupProps>((props
 
   return (
     <InternalMenuItemGroup ref={ref} {...omit(props, ['warnKey'])}>
-      {childList}
+      {typeof itemRender === 'function' ? itemRender(childList) : childList}
     </InternalMenuItemGroup>
   );
 });

src/SubMenu/index.tsx

@@ -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,15 @@ const SubMenu = React.forwardRef<HTMLLIElement, SubMenuProps>((props, ref) => {
   let renderNode: React.ReactNode;
 
   // ======================== Render ========================
+
+  const childListNode = typeof itemRender === 'function' ? itemRender(childList) : childList;
+
   if (measure) {
-    renderNode = childList;
+    renderNode = childListNode;
   } else {
     renderNode = (
       <InternalSubMenu ref={ref} {...props}>
-        {childList}
+        {childListNode}
       </InternalSubMenu>
     );
   }

src/interface.ts

@@ -6,6 +6,7 @@ interface ItemSharedProps {
   ref?: React.Ref<HTMLLIElement | null>;
   style?: React.CSSProperties;
   className?: string;
+  itemRender?: (originNode: React.ReactNode) => React.ReactNode;
 }
 
 export interface SubMenuType extends ItemSharedProps {

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

@@ -10,6 +10,7 @@ function convertItemsToNodes(
   list: ItemType[],
   components: Required<Components>,
   prefixCls?: string,
+  itemRender?: (originNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactElement,
 ) {
   const {
     item: MergedMenuItem,
@@ -20,6 +21,9 @@ function convertItemsToNodes(
 
   return (list || [])
     .map((opt, index) => {
+      const renderNodeWrapper = node => {
+        return typeof itemRender === 'function' ? itemRender(node, opt as any) : node;
+      };
       if (opt && typeof opt === 'object') {
         const { label, children, key, type, extra, ...restProps } = opt as any;
         const mergedKey = key ?? `tmp-${index}`;
@@ -29,31 +33,44 @@ function convertItemsToNodes(
           if (type === 'group') {
             // Group
             return (
-              <MergedMenuItemGroup key={mergedKey} {...restProps} title={label}>
-                {convertItemsToNodes(children, components, prefixCls)}
+              <MergedMenuItemGroup
+                key={mergedKey}
+                {...restProps}
+                itemRender={renderNodeWrapper}
+                title={label}
+              >
+                {convertItemsToNodes(children, components, prefixCls, itemRender)}
               </MergedMenuItemGroup>
             );
           }
 
           // Sub Menu
           return (
-            <MergedSubMenu key={mergedKey} {...restProps} title={label}>
-              {convertItemsToNodes(children, components, prefixCls)}
+            <MergedSubMenu
+              key={mergedKey}
+              {...restProps}
+              itemRender={renderNodeWrapper}
+              title={label}
+            >
+              {convertItemsToNodes(children, components, prefixCls, itemRender)}
             </MergedSubMenu>
           );
         }
 
         // MenuItem & Divider
         if (type === 'divider') {
-          return <MergedDivider key={mergedKey} {...restProps} />;
+          return <MergedDivider key={mergedKey} {...restProps} itemRender={renderNodeWrapper} />;
         }
 
         return (
-          <MergedMenuItem key={mergedKey} {...restProps} extra={extra}>
+          <MergedMenuItem
+            key={mergedKey}
+            {...restProps}
+            extra={extra}
+            itemRender={renderNodeWrapper}
+          >
             {label}
-            {(!!extra || extra === 0) && (
-              <span className={`${prefixCls}-item-extra`}>{extra}</span>
-            )}
+            {(!!extra || extra === 0) && <span className={`${prefixCls}-item-extra`}>{extra}</span>}
           </MergedMenuItem>
         );
       }
@@ -69,6 +86,7 @@ export function parseItems(
   keyPath: string[],
   components: Components,
   prefixCls?: string,
+  itemRender?: (originNode: React.ReactNode, item?: NonNullable<ItemType>) => React.ReactElement,
 ) {
   let childNodes = children;
 
@@ -81,7 +99,7 @@ export function parseItems(
   };
 
   if (items) {
-    childNodes = convertItemsToNodes(items, mergedComponents, prefixCls);
+    childNodes = convertItemsToNodes(items, mergedComponents, prefixCls, itemRender);
   }
 
   return parseChildren(childNodes, keyPath);

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');
+    });
   });
 });