fix(form): support single child wrapped in array (#7075)

Co-authored-by: casds-FDXS <你的 GitHub 邮箱>

Author: casds-FDXS

src/components/form/form-item.tsx

@@ -22,6 +22,15 @@ const NAME_SPLIT = '__SPLIT__'
 type RenderChildren<Values = any> = (form: FormInstance<Values>) => ReactNode
 type ChildrenType<Values = any> = RenderChildren<Values> | ReactNode
 
+function useChildren(children?: ChildrenType): ChildrenType {
+  if (typeof children === 'function') {
+    return children
+  }
+
+  const childList = toArray(children)
+  return childList.length <= 1 ? childList[0] : childList
+}
+
 type RcFieldProps = Omit<FieldProps, 'children'>
 
 const classPrefix = `adm-form-item`
@@ -265,6 +274,8 @@ export const FormItem: FC<FormItemProps> = props => {
     ...fieldProps
   } = props
 
+  const mergedChildren = useChildren(children)
+
   const { name: formName } = useContext(FormContext)
   const { validateTrigger: contextValidateTrigger } = useContext(FieldContext)
 
@@ -359,10 +370,10 @@ export const FormItem: FC<FormItemProps> = props => {
     )
   }
 
-  const isRenderProps = typeof children === 'function'
+  const isRenderProps = typeof mergedChildren === 'function'
 
   if (!name && !isRenderProps && !props.dependencies) {
-    return renderLayout(children) as JSX.Element
+    return renderLayout(mergedChildren) as JSX.Element
   }
 
   let Variables: Record<string, string> = {}
@@ -416,7 +427,7 @@ export const FormItem: FC<FormItemProps> = props => {
 
         if (isRenderProps) {
           if ((shouldUpdate || dependencies) && !name) {
-            childNode = (children as RenderChildren)(context)
+            childNode = (mergedChildren as RenderChildren)(context)
           } else {
             if (!(shouldUpdate || dependencies)) {
               devWarning(
@@ -438,18 +449,18 @@ export const FormItem: FC<FormItemProps> = props => {
             'Form.Item',
             'Must set `name` or use render props when `dependencies` is set.'
           )
-        } else if (React.isValidElement(children)) {
-          if (children.props.defaultValue) {
+        } else if (React.isValidElement(mergedChildren)) {
+          if (mergedChildren.props.defaultValue) {
             devWarning(
               'Form.Item',
               '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.'
             )
           }
-          const childProps = { ...children.props, ...control }
+          const childProps = { ...mergedChildren.props, ...control }
 
-          if (isSafeSetRefComponent(children)) {
+          if (isSafeSetRefComponent(mergedChildren)) {
             childProps.ref = (instance: any) => {
-              const originRef = (children as any).ref
+              const originRef = (mergedChildren as any).ref
               if (originRef) {
                 if (typeof originRef === 'function') {
                   originRef(instance)
@@ -475,7 +486,7 @@ export const FormItem: FC<FormItemProps> = props => {
           triggers.forEach(eventName => {
             childProps[eventName] = (...args: any[]) => {
               control[eventName]?.(...args)
-              children.props[eventName]?.(...args)
+              mergedChildren.props[eventName]?.(...args)
             }
           })
 
@@ -484,7 +495,7 @@ export const FormItem: FC<FormItemProps> = props => {
               value={control[props.valuePropName || 'value']}
               update={updateRef.current}
             >
-              {React.cloneElement(children, childProps)}
+              {React.cloneElement(mergedChildren, childProps)}
             </MemoInput>
           )
         } else {
@@ -494,7 +505,7 @@ export const FormItem: FC<FormItemProps> = props => {
               '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.'
             )
           }
-          childNode = children
+          childNode = mergedChildren
         }
 
         return renderLayout(childNode, fieldId, meta, isRequired)

src/components/form/tests/form.test.tsx

@@ -343,6 +343,36 @@ describe('Form', () => {
   })
 
   describe('Form.Item', () => {
+    test('supports a single child wrapped in an array', async () => {
+      const onFinish = jest.fn()
+      const { container, getByText } = render(
+        <Form
+          initialValues={{ name: 'bamboo' }}
+          onFinish={onFinish}
+          footer={
+            <Button block type='submit'>
+              submit
+            </Button>
+          }
+        >
+          <Form.Item name='name' label='Name'>
+            {[<Input key='input' />]}
+          </Form.Item>
+        </Form>
+      )
+
+      const input = container.querySelector('input') as HTMLInputElement
+      expect(input.value).toBe('bamboo')
+
+      fireEvent.change(input, { target: { value: 'little' } })
+      fireEvent.click(getByText('submit'))
+
+      await waitFor(() => {
+        expect(onFinish).toHaveBeenCalled()
+      })
+      expect(onFinish.mock.calls[0][0]).toEqual({ name: 'little' })
+    })
+
     test('noStyle', async () => {
       const onChange = jest.fn()
       const { container } = render(