update key

Author: meet-student

docs/examples/items.tsx

@@ -6,7 +6,7 @@ import '../../assets/index.less';
 
 export default () => (
   <Menu
-    itemsRender={(originNode, item) => {
+    itemRender={(originNode, item) => {
       if (item.type === 'item') {
         return (
           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">

src/Menu.tsx

@@ -62,7 +62,7 @@ export interface MenuProps
   /** @deprecated Please use `items` instead */
   children?: React.ReactNode;
 
-  itemsRender?: (originalNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactNode;
+  itemRender?: (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. */
@@ -246,7 +246,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
 
     popupRender,
 
-    itemsRender,
+    itemRender,
     ...restProps
   } = props as LegacyMenuProps;
 
@@ -255,10 +255,10 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
     measureChildList: React.ReactElement[],
   ] = React.useMemo(
     () => [
-      parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls, itemsRender),
-      parseItems(children, items, EMPTY_LIST, {}, prefixCls, itemsRender),
+      parseItems(children, items, EMPTY_LIST, _internalComponents, prefixCls, itemRender),
+      parseItems(children, items, EMPTY_LIST, {}, prefixCls, itemRender),
     ],
-    [children, items, _internalComponents, prefixCls, itemsRender],
+    [children, items, _internalComponents, prefixCls, itemRender],
   );
 
   const [mounted, setMounted] = React.useState(false);

src/utils/commonUtil.ts

@@ -1,7 +1,11 @@
 import toArray from '@rc-component/util/lib/Children/toArray';
 import * as React from 'react';
 
-export function parseChildren(children: React.ReactNode | undefined, keyPath: string[]) {
+export function parseChildren(
+  children: React.ReactNode | undefined,
+  keyPath: string[],
+  itemRender?: (originNode: React.ReactNode) => React.ReactNode,
+) {
   return toArray(children).map((child, index) => {
     if (React.isValidElement(child)) {
       const { key } = child;
@@ -18,7 +22,9 @@ export function parseChildren(children: React.ReactNode | undefined, keyPath: st
       if (process.env.NODE_ENV !== 'production' && emptyKey) {
         cloneProps.warnKey = true;
       }
-
+      if (typeof itemRender === 'function') {
+        return itemRender(React.cloneElement(child, cloneProps));
+      }
       return React.cloneElement(child, cloneProps);
     }
 

src/utils/nodeUtil.tsx

@@ -10,7 +10,7 @@ function convertItemsToNodes(
   list: ItemType[],
   components: Required<Components>,
   prefixCls?: string,
-  itemsRender?: (originNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactNode,
+  itemRender?: (originNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactNode,
 ) {
   const {
     item: MergedMenuItem,
@@ -32,13 +32,13 @@ function convertItemsToNodes(
           if (type === 'group') {
             originNode = (
               <MergedMenuItemGroup key={mergedKey} {...restProps} title={label}>
-                {convertItemsToNodes(children, components, prefixCls, itemsRender)}
+                {convertItemsToNodes(children, components, prefixCls, itemRender)}
               </MergedMenuItemGroup>
             );
           } else {
             originNode = (
               <MergedSubMenu key={mergedKey} {...restProps} title={label}>
-                {convertItemsToNodes(children, components, prefixCls, itemsRender)}
+                {convertItemsToNodes(children, components, prefixCls, itemRender)}
               </MergedSubMenu>
             );
           }
@@ -59,8 +59,8 @@ function convertItemsToNodes(
           );
         }
 
-        if (typeof itemsRender === 'function') {
-          return itemsRender(originNode, opt);
+        if (typeof itemRender === 'function') {
+          return itemRender(originNode, opt);
         }
         return originNode;
       }
@@ -76,7 +76,7 @@ export function parseItems(
   keyPath: string[],
   components: Components,
   prefixCls?: string,
-  itemsRender?: (originNode: React.ReactNode, item: NonNullable<ItemType>) => React.ReactNode,
+  itemRender?: (originNode: React.ReactNode, item?: NonNullable<ItemType>) => React.ReactNode,
 ) {
   let childNodes = children;
 
@@ -89,8 +89,8 @@ export function parseItems(
   };
 
   if (items) {
-    childNodes = convertItemsToNodes(items, mergedComponents, prefixCls, itemsRender);
+    childNodes = convertItemsToNodes(items, mergedComponents, prefixCls, itemRender);
   }
 
-  return parseChildren(childNodes, keyPath);
+  return parseChildren(childNodes, keyPath, itemRender);
 }

tests/MenuItem.spec.tsx

@@ -232,7 +232,7 @@ describe('MenuItem', () => {
     it('should wrap originNode with custom render', () => {
       const { container } = render(
         <Menu
-          itemsRender={(originNode, item) => {
+          itemRender={(originNode, item) => {
             if (item.type === 'item') {
               return (
                 <a href="https://ant.design" target="_blank" rel="noopener noreferrer">

tests/Responsive.spec.tsx

@@ -30,7 +30,7 @@ jest.mock('rc-resize-observer', () => {
 
 describe('Menu.Responsive', () => {
   beforeEach(() => {
-    global.resizeProps = null;
+    global.resizeProps = new Map<number, any>();
     jest.useFakeTimers();
   });
 
@@ -122,7 +122,7 @@ describe('Menu.Responsive', () => {
     }));
     // Set container width
     act(() => {
-      getResizeProps()[0].onResize({}, document.createElement('div'));
+      getResizeProps()?.[0]?.onResize?.({}, document.createElement('div'));
       jest.runAllTimers();
     });
     spy.mockRestore();