fix: List warning (#24568)

* refactor code

* fix: List not recognize colStyle on DOM node

close #24557

components/list/Item.tsx

@@ -58,12 +58,19 @@ export interface ListItemTypeProps extends React.FC<ListItemProps> {
   Meta: typeof Meta;
 }
 
-const Item: ListItemTypeProps = props => {
+const Item: ListItemTypeProps = ({
+  prefixCls: customizePrefixCls,
+  children,
+  actions,
+  extra,
+  className,
+  colStyle,
+  ...others
+}) => {
   const { grid, itemLayout } = React.useContext(ListContext);
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const isItemContainsTextNodeAndNotSingular = () => {
-    const { children } = props;
     let result;
     React.Children.forEach(children, (element: React.ReactElement<any>) => {
       if (typeof element === 'string') {
@@ -74,22 +81,12 @@ const Item: ListItemTypeProps = props => {
   };
 
   const isFlexMode = () => {
-    const { extra } = props;
     if (itemLayout === 'vertical') {
       return !!extra;
     }
     return !isItemContainsTextNodeAndNotSingular();
   };
 
-  const {
-    prefixCls: customizePrefixCls,
-    children,
-    actions,
-    extra,
-    className,
-    colStyle,
-    ...others
-  } = props;
   const prefixCls = getPrefixCls('list', customizePrefixCls);
   const actionsContent = actions && actions.length > 0 && (
     <ul className={`${prefixCls}-item-action`} key="actions">

components/list/index.tsx

@@ -245,10 +245,17 @@ function List<T>({
   if (splitDataSource.length > 0) {
     const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index));
     const childrenList = React.Children.map(items, (child: any, index) =>
-      cloneElement(child, {
-        key: keys[index],
-        colStyle,
-      }),
+      cloneElement(
+        child,
+        grid
+          ? {
+              key: keys[index],
+              colStyle,
+            }
+          : {
+              key: keys[index],
+            },
+      ),
     );
     childrenContent = grid ? (
       <Row gutter={grid.gutter}>{childrenList}</Row>