自定义Form.item组件无法获取Form设置的FormContext问题

问题核心：Antd的FormContext并未将labelCol直接暴露在顶层，而是将表单的默认布局配置（包括labelCol）存储在表单实例的config属性中。

解决方法 #

通过表单实例的config属性即可获取Form组件设置的labelCol，有两种实现方式：

方式一：使用useFormInstance钩子（推荐）

import React from 'react';
import { Form, FormItemProps, useFormInstance } from 'antd';

const MyFormItem: React.FC<FormItemProps> = ({ children, ...rest }) => {
  const form = useFormInstance();
  // 获取Form组件设置的labelCol
  const formLabelCol = form.config.labelCol;
  console.log(formLabelCol); // 输出 { style: { width: 100 } }

  return <Form.Item {...rest}>{children}</Form.Item>;
};

方式二：直接通过FormContext获取

import React from 'react';
import { Form, FormItemProps } from 'antd';
import { FormContext } from 'antd/lib/form/context';

const MyFormItem: React.FC<FormItemProps> = ({ children, ...rest }) => {
  const { form } = React.useContext(FormContext);
  const formLabelCol = form.config.labelCol;
  console.log(formLabelCol); // 输出 { style: { width: 100 } }

  return <Form.Item {...rest}>{children}</Form.Item>;
};

补充说明 #

如果你的自定义MyFormItem需要使用最终生效的labelCol（即优先使用Form.Item自身设置的labelCol，没有则用Form的默认值），可以直接将rest传递给Form.Item，Antd会自动处理合并逻辑，无需手动获取：

return <Form.Item {...rest}>{children}</Form.Item>;

此时Form.Item会自动继承Form组件的labelCol配置，无需额外处理。

内容的提问来源于stack exchange，提问作者user21004055