feat: Support custom rendering

Author: meet-student

docs/examples/items.tsx

@@ -6,13 +6,32 @@ import '../../assets/index.less';
 
 export default () => (
   <Menu
+    itemsRender={(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/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';
 
@@ -61,6 +62,8 @@ export interface MenuProps
   /** @deprecated Please use `items` instead */
   children?: React.ReactNode;
 
+  itemsRender?: (originalNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactNode;
+
   disabled?: boolean;
   /** @private Disable auto overflow. Pls note the prop name may refactor since we do not final decided. */
   disabledOverflow?: boolean;
@@ -242,6 +245,8 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     _internalComponents,
 
     popupRender,
+
+    itemsRender,
     ...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, itemsRender),
+      parseItems(children, items, EMPTY_LIST, {}, prefixCls, itemsRender),
     ],
-    [children, items, _internalComponents],
+    [children, items, _internalComponents, prefixCls, itemsRender],
   );
 
   const [mounted, setMounted] = React.useState(false);

src/utils/nodeUtil.tsx

@@ -10,6 +10,7 @@ function convertItemsToNodes(
   list: ItemType[],
   components: Required<Components>,
   prefixCls?: string,
+  itemsRender?: (originNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactNode,
 ) {
   const {
     item: MergedMenuItem,
@@ -24,38 +25,44 @@ function convertItemsToNodes(
         const { label, children, key, type, extra, ...restProps } = opt as any;
         const mergedKey = key ?? `tmp-${index}`;
 
-        // MenuItemGroup & SubMenuItem
+        let originNode: React.ReactNode = null;
+
+        // MenuItemGroup & SubMenu
         if (children || type === 'group') {
           if (type === 'group') {
-            // Group
-            return (
+            originNode = (
               <MergedMenuItemGroup key={mergedKey} {...restProps} title={label}>
-                {convertItemsToNodes(children, components, prefixCls)}
+                {convertItemsToNodes(children, components, prefixCls, itemsRender)}
               </MergedMenuItemGroup>
             );
+          } else {
+            originNode = (
+              <MergedSubMenu key={mergedKey} {...restProps} title={label}>
+                {convertItemsToNodes(children, components, prefixCls, itemsRender)}
+              </MergedSubMenu>
+            );
           }
-
-          // Sub Menu
-          return (
-            <MergedSubMenu key={mergedKey} {...restProps} title={label}>
-              {convertItemsToNodes(children, components, prefixCls)}
-            </MergedSubMenu>
+        }
+        // Divider
+        else if (type === 'divider') {
+          originNode = <MergedDivider key={mergedKey} {...restProps} />;
+        }
+        // MenuItem
+        else {
+          originNode = (
+            <MergedMenuItem key={mergedKey} {...restProps} extra={extra}>
+              {label}
+              {(!!extra || extra === 0) && (
+                <span className={`${prefixCls}-item-extra`}>{extra}</span>
+              )}
+            </MergedMenuItem>
           );
         }
 
-        // MenuItem & Divider
-        if (type === 'divider') {
-          return <MergedDivider key={mergedKey} {...restProps} />;
+        if (typeof itemsRender === 'function') {
+          return itemsRender(originNode, opt);
         }
-
-        return (
-          <MergedMenuItem key={mergedKey} {...restProps} extra={extra}>
-            {label}
-            {(!!extra || extra === 0) && (
-              <span className={`${prefixCls}-item-extra`}>{extra}</span>
-            )}
-          </MergedMenuItem>
-        );
+        return originNode;
       }
 
       return null;
@@ -69,6 +76,7 @@ export function parseItems(
   keyPath: string[],
   components: Components,
   prefixCls?: string,
+  itemsRender?: (originNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactNode,
 ) {
   let childNodes = children;
 
@@ -81,7 +89,7 @@ export function parseItems(
   };
 
   if (items) {
-    childNodes = convertItemsToNodes(items, mergedComponents, prefixCls);
+    childNodes = convertItemsToNodes(items, mergedComponents, prefixCls, itemsRender);
   }
 
   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
+          itemsRender={(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');
+    });
   });
 });