From 0f91afd5cbfb98574fb440e451fcd1fb72810fb7 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 20 Oct 2025 14:45:14 +0800 Subject: [PATCH] refactor: use rc-utils's toArray replace React's Children legacy api (#55354) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: use rc-utils's toArray replace React's Children legacy api * Update components/list/Item.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: thinkasany <480968828@qq.com> * Update components/button/buttonHelpers.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: thinkasany <480968828@qq.com> * Update components/card/Card.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: thinkasany <480968828@qq.com> * Update components/carousel/index.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: thinkasany <480968828@qq.com> * Update components/button/button.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: thinkasany <480968828@qq.com> * fix * fix --------- Signed-off-by: thinkasany <480968828@qq.com> Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: 遇见同学 <1875694521@qq.com> --- components/button/button.tsx | 8 ++++---- components/card/Card.tsx | 6 +++--- components/carousel/index.tsx | 4 +++- components/list/Item.tsx | 7 ++++--- eslint.config.mjs | 1 - 5 files changed, 14 insertions(+), 12 deletions(-) diff --git a/components/button/button.tsx b/components/button/button.tsx index 0f64a04e98..c5b7e167b6 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -1,5 +1,5 @@ -import React, { Children, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { omit, useComposeRef } from '@rc-component/util'; +import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'; +import { omit, toArray, useComposeRef } from '@rc-component/util'; import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect'; import { clsx } from 'clsx'; @@ -142,7 +142,7 @@ const InternalCompoundedButton = React.forwardRef< autoFocus, ...rest } = props; - + const childNodes: React.ReactNode[] = toArray(children); // https://github.com/ant-design/ant-design/issues/47605 // Compatible with original `type` behavior const mergedType = type || 'default'; @@ -216,7 +216,7 @@ const InternalCompoundedButton = React.forwardRef< const mergedRef = useComposeRef(ref, buttonRef); const needInserted = - Children.count(children) === 1 && !icon && !isUnBorderedButtonVariant(mergedVariant); + childNodes.length === 1 && !icon && !isUnBorderedButtonVariant(mergedVariant); // ========================= Mount ========================== // Record for mount status. diff --git a/components/card/Card.tsx b/components/card/Card.tsx index ed29d99085..6209753441 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import type { Tab, TabBarExtraContent } from '@rc-component/tabs/lib/interface'; -import omit from '@rc-component/util/lib/omit'; +import { omit, toArray } from '@rc-component/util'; import { clsx } from 'clsx'; import useMergeSemantic from '../_util/hooks/useMergeSemantic'; @@ -159,8 +159,8 @@ const Card = React.forwardRef((props, ref) => { }; const isContainGrid = React.useMemo(() => { - const childrenArray = React.Children.toArray(children); - return childrenArray.some((child) => React.isValidElement(child) && child.type === Grid); + const childNodes: React.ReactNode[] = toArray(children); + return childNodes.some((child) => React.isValidElement(child) && child.type === Grid); }, [children]); const prefixCls = getPrefixCls('card', customizePrefixCls); diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index ef7611ec6a..18d61d91e3 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import type { Settings } from '@ant-design/react-slick'; import SlickCarousel from '@ant-design/react-slick'; +import { toArray } from '@rc-component/util'; import { clsx } from 'clsx'; import { devUseWarning } from '../_util/warning'; @@ -104,7 +105,8 @@ const Carousel = React.forwardRef((props, ref) => { [slickRef.current], ); const { children, initialSlide = 0 } = props; - const count = React.Children.count(children); + const childNodes: React.ReactNode[] = toArray(children); + const count = childNodes.length; const isRTL = (rtl ?? direction === 'rtl') && !vertical; React.useEffect(() => { diff --git a/components/list/Item.tsx b/components/list/Item.tsx index 179e61b07f..ca661797f9 100644 --- a/components/list/Item.tsx +++ b/components/list/Item.tsx @@ -1,5 +1,6 @@ import type { CSSProperties, HTMLAttributes, ReactNode } from 'react'; import React, { useContext } from 'react'; +import { toArray } from '@rc-component/util'; import { clsx } from 'clsx'; import type { SemanticClassNames, SemanticStyles } from '../_util/hooks/useMergeSemantic'; @@ -87,9 +88,9 @@ const InternalItem = React.forwardRef((props, ref }); const isItemContainsTextNodeAndNotSingular = () => { - const childrenArray = React.Children.toArray(children); - const hasTextNode = childrenArray.some((node) => typeof node === 'string'); - return hasTextNode && childrenArray.length > 1; + const childNodes: React.ReactNode[] = toArray(children); + const hasTextNode = childNodes.some((node) => typeof node === 'string'); + return hasTextNode && childNodes.length > 1; }; const isFlexMode = () => { diff --git a/eslint.config.mjs b/eslint.config.mjs index bafe4a906b..461b7f7773 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -44,7 +44,6 @@ export default antfu( 'react-refresh/only-export-components': 'off', // TODO: remove this 'react/no-clone-element': 'off', 'react/no-children-for-each': 'off', - 'react/no-children-count': 'off', 'react/no-children-map': 'off', 'react/no-children-only': 'off', 'react/no-unstable-default-props': 'off',