diff --git a/packages/form/src/components/FormItem/index.tsx b/packages/form/src/components/FormItem/index.tsx
index 0a93deee682a..19c97b20d322 100644
--- a/packages/form/src/components/FormItem/index.tsx
+++ b/packages/form/src/components/FormItem/index.tsx
@@ -182,18 +182,64 @@ const WarpFormItem: React.FC<
help,
...props
}) => {
- const formDom = useMemo(() => {
- let getValuePropsFunc: any = (value: any) => {
- const newValue = convertValue?.(value, props.name!) ?? value;
- if (props.getValueProps) return props.getValueProps(newValue);
- return {
- [valuePropName || 'value']: newValue,
+ const formDom = useMemo(() => {
+ let getValuePropsFunc: any = (value: any) => {
+ const newValue = convertValue?.(value, props.name!) ?? value;
+ if (props.getValueProps) return props.getValueProps(newValue);
+ return {
+ [valuePropName || 'value']: newValue,
+ };
};
- };
- if (!convertValue && !props.getValueProps) {
- getValuePropsFunc = undefined;
- }
- if (!addonAfter && !addonBefore) {
+ if (!convertValue && !props.getValueProps) {
+ getValuePropsFunc = undefined;
+ }
+
+ const prepareItemRender = (
+ inputProps: FormItemProps & {
+ errors: React.ReactNode[];
+ warnings: React.ReactNode[];
+ },
+ doms: {
+ input: JSX.Element;
+ errorList: JSX.Element;
+ extra: JSX.Element;
+ }) => {
+
+ const nextInput = (addonAfter || addonBefore)
+ ? (
+
+ {addonBefore ? (
+
{addonBefore}
+ ) : null}
+ {doms.input}
+ {addonAfter ? (
+
{addonAfter}
+ ) : null}
+
+ )
+ : doms.input
+
+ const nextErrorList = typeof help === 'function'
+ ? help({
+ errors: inputProps.errors,
+ warnings: inputProps.warnings,
+ })
+ : doms.errorList
+
+ return {
+ ...doms,
+ input: nextInput,
+ errorList: nextErrorList
+ }
+ }
+
return (
(
- <>
- {doms.input}
- {typeof help === 'function'
- ? help({
- errors: inputProps.errors,
- warnings: inputProps.warnings,
- })
- : doms.errorList}
- {doms.extra}
- >
- ),
+ prepare: prepareItemRender,
+ // Legacy
+ render(...args: Parameters) {
+ const { input, errorList, extra } = prepareItemRender(...args);
+ return (
+ <>
+ {input}
+ {errorList}
+ {extra}
+ >
+ )
+ }
}}
>
{children}
);
- }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [addonAfter, addonBefore, children, convertValue?.toString(), props]);
return (
- (
- <>
-
- {addonBefore ? (
-
{addonBefore}
- ) : null}
- {doms.input}
- {addonAfter ? (
-
{addonAfter}
- ) : null}
-
- {typeof help === 'function'
- ? help({
- errors: inputProps.errors,
- warnings: inputProps.warnings,
- })
- : doms.errorList}
- {doms.extra}
- >
- ),
+
- {children}
-
+ {formDom}
+
);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [addonAfter, addonBefore, children, convertValue?.toString(), props]);
-
- return (
-
- {formDom}
-
- );
-};
+ };
export type ProFormItemProps = FormItemProps & {
ignoreFormItem?: boolean;