fix(Form): Form adapts to React.Fragment, close#1702

Author: youluna

src/form/form.jsx

@@ -18,6 +18,50 @@ function pickerDefined(obj) {
 function preventDefault(e) {
     e.preventDefault();
 }
+const getNewChildren = (children, props) => {
+    const {
+        size,
+        device,
+        labelAlign,
+        labelTextAlign,
+        labelCol,
+        wrapperCol,
+        responsive,
+    } = props;
+
+    return React.Children.map(children, child => {
+        if (obj.isReactFragment(child)) {
+            return getNewChildren(child.props.children, props);
+        }
+
+        if (
+            child &&
+            typeof child.type === 'function' &&
+            child.type._typeMark === 'form_item'
+        ) {
+            const childrenProps = {
+                labelCol: child.props.labelCol
+                    ? child.props.labelCol
+                    : labelCol,
+                wrapperCol: child.props.wrapperCol
+                    ? child.props.wrapperCol
+                    : wrapperCol,
+                labelAlign: child.props.labelAlign
+                    ? child.props.labelAlign
+                    : device === 'phone'
+                    ? 'top'
+                    : labelAlign,
+                labelTextAlign: child.props.labelTextAlign
+                    ? child.props.labelTextAlign
+                    : labelTextAlign,
+                size: child.props.size ? child.props.size : size,
+                responsive: responsive,
+            };
+            return React.cloneElement(child, pickerDefined(childrenProps));
+        }
+        return child;
+    });
+};
 
 /** Form */
 export default class Form extends React.Component {
@@ -214,34 +258,7 @@ export default class Form extends React.Component {
             [className]: !!className,
         });
 
-        const newChildren = React.Children.map(children, child => {
-            if (
-                child &&
-                typeof child.type === 'function' &&
-                child.type._typeMark === 'form_item'
-            ) {
-                const childrenProps = {
-                    labelCol: child.props.labelCol
-                        ? child.props.labelCol
-                        : labelCol,
-                    wrapperCol: child.props.wrapperCol
-                        ? child.props.wrapperCol
-                        : wrapperCol,
-                    labelAlign: child.props.labelAlign
-                        ? child.props.labelAlign
-                        : device === 'phone'
-                        ? 'top'
-                        : labelAlign,
-                    labelTextAlign: child.props.labelTextAlign
-                        ? child.props.labelTextAlign
-                        : labelTextAlign,
-                    size: child.props.size ? child.props.size : size,
-                    responsive: responsive,
-                };
-                return React.cloneElement(child, pickerDefined(childrenProps));
-            }
-            return child;
-        });
+        const newChildren = getNewChildren(children, this.props);
 
         return (
             <Tag

src/responsive-grid/index.jsx

@@ -6,7 +6,7 @@ import { obj } from '../util';
 import createStyle, { getGridChildProps } from './create-style';
 import Cell from './cell';
 
-const { pickOthers } = obj;
+const { pickOthers, isReactFragment } = obj;
 
 const createChildren = (children, device) => {
     const array = React.Children.toArray(children);
@@ -15,6 +15,10 @@ const createChildren = (children, device) => {
     }
 
     return array.map(child => {
+        if (isReactFragment(child)) {
+            return createChildren(child.props.children, device);
+        }
+
         if (
             React.isValidElement(child) &&
             typeof child.type === 'function' &&

src/util/object.js

@@ -293,3 +293,14 @@ export function isClassComponent(component) {
         component.prototype.isReactComponent !== undefined
     );
 }
+
+/**
+ * 判断是否为 ReactFragment
+ * @param {*} component  传入的组件
+ */
+export function isReactFragment(component) {
+    if (component.type) {
+        return component.type === React.Fragment;
+    }
+    return component === React.Fragment;
+}