diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx index 878452b76d51..4b538918f238 100644 --- a/components/form/FormItem/index.tsx +++ b/components/form/FormItem/index.tsx @@ -276,27 +276,31 @@ function InternalFormItem(props: FormItemProps): React.Rea warning( !(shouldUpdate && dependencies), 'Form.Item', - "`shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.", + "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/#form-deps.", ); if (Array.isArray(children) && hasName) { - warning(false, 'Form.Item', '`children` is array of render props cannot have `name`.'); + warning( + false, + 'Form.Item', + 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.', + ); childNode = children; } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) { warning( !!(shouldUpdate || dependencies), 'Form.Item', - '`children` of render props only work with `shouldUpdate` or `dependencies`.', + 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.', ); warning( !hasName, 'Form.Item', - "Do not use `name` with `children` of render props since it's not a field.", + "A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.", ); } else if (dependencies && !isRenderProps && !hasName) { warning( false, 'Form.Item', - 'Must set `name` or use render props when `dependencies` is set.', + 'Must set `name` or use a render function when `dependencies` is set.', ); } else if (isValidElement(children)) { warning( diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index a81e743edd3b..1480b2c3e99d 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -166,14 +166,14 @@ describe('Form', () => { }); }); - it('`shouldUpdate` should work with render props', () => { + it('render functions require either `shouldUpdate` or `dependencies`', () => { render(
{() => null}
, ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Form.Item] `children` of render props only work with `shouldUpdate` or `dependencies`.', + 'Warning: [antd: Form.Item] A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.', ); }); it("`shouldUpdate` shouldn't work with `dependencies`", () => { @@ -185,7 +185,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - "Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.", + "Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/#form-deps.", ); }); @@ -198,11 +198,11 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - "Warning: [antd: Form.Item] Do not use `name` with `children` of render props since it's not a field.", + "Warning: [antd: Form.Item] A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.", ); }); - it('children is array has name props', () => { + it('multiple children with a name prop', () => { render(
@@ -212,7 +212,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Form.Item] `children` is array of render props cannot have `name`.', + 'Warning: [antd: Form.Item] A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/#complex-form-item.', ); }); @@ -610,7 +610,7 @@ describe('Form', () => { , ); expect(errorSpy).toHaveBeenCalledWith( - 'Warning: [antd: Form.Item] Must set `name` or use render props when `dependencies` is set.', + 'Warning: [antd: Form.Item] Must set `name` or use a render function when `dependencies` is set.', ); });