feat(shared/hooks): 为 useChildrenWithRefs 的 cloneEl 添加 index 入参

Author: mengxinssfd

packages/shared/src/hooks/__tests__/useChildrenWithRefs.test.tsx

@@ -92,13 +92,19 @@ describe('useChildrenWithRefs', () => {
     expect(obj.ref).toBe(firstChild);
   });
   test('cloneEl', () => {
+    const arr: number[] = [];
     const App = () => {
-      const [children] = useChildrenWithRefs(<div>foo</div>, (element, props) =>
-        cloneElement(element, { ...props, className: 'foo' }),
+      const [children] = useChildrenWithRefs(
+        <div>foo</div>,
+        (element, props, index) => {
+          arr.push(index);
+          return cloneElement(element, { ...props, className: 'foo' });
+        },
       );
       return children;
     };
     const { container } = render(<App />);
     expect(container.firstChild).toHaveClass('foo');
+    expect(arr).toEqual([0]);
   });
 });

packages/shared/src/hooks/useChildrenWithRefs.ts

@@ -16,25 +16,30 @@ export function useChildrenWithRefs(
   cloneEl?: (
     element: ReactElement<any, JSXElementConstructor<any> | string>,
     props: { ref: (el: HTMLElement) => void },
+    index: number,
   ) => ReactElement,
 ): [children: ReactNode, refs: (HTMLElement | undefined)[]] {
   return useMemo(() => {
     const refs: (HTMLElement | undefined)[] = [];
-    const clone = cloneEl || cloneElement;
+    const clone = cloneEl || ((element, props) => cloneElement(element, props));
     const newChildren = Children.map(children, (child, index) => {
       if (!isValidElement(child)) return child;
-      return clone(child, {
-        ref: (el: HTMLElement) => {
-          refs[index] = el;
-          // ref 现在是直接放在 ReactElement 上的，props 虽然也有，但取的是 undefined
-          const originRef = (child as any).ref;
-          // const originRef = child.props.ref;
-          if (!originRef) return;
-          // 连通原来的 ref
-          if (typeof originRef === 'function') originRef(el);
-          else originRef.current = el;
+      return clone(
+        child,
+        {
+          ref: (el: HTMLElement) => {
+            refs[index] = el;
+            // ref 现在是直接放在 ReactElement 上的，props 虽然也有，但取的是 undefined
+            const originRef = (child as any).ref;
+            // const originRef = child.props.ref;
+            if (!originRef) return;
+            // 连通原来的 ref
+            if (typeof originRef === 'function') originRef(el);
+            else originRef.current = el;
+          },
         },
-      });
+        index,
+      );
     });
     return [newChildren, refs];
   }, [children]);