有些前端问题，看起来像“语法没写对”，其实本质上是**组件模型没对齐**。

尤其在使用 Ant Design 3.x 的 `Form.create` 时，这种感觉会格外明显。表单明明已经被高阶组件包装过，页面也能正常渲染，提交流程看上去也没问题，可一旦你想从外部拿到表单实例，事情就开始变得微妙起来：`ref` 好像拿到了，但又不是你真正需要的那个；想访问 `form`，结果发现路径不对；组件一旦换成函数组件，拿实例这件事又立刻变成了另一套话语体系。

这类问题最容易让人误以为只是“写法细节”，但顺着相关 PR 和文档去看，会发现它背后其实指向一个很典型的话题：**`Form.create` 包装后的组件，究竟该如何正确暴露和获取表单实例**。

## 这次调整聚焦的是什么

从相关 PR 与文档信息来看，核心点非常集中：**在经过 `Form.create` 包装之后，若要获取组件实例，不能直接依赖普通 `ref`，而应使用 `rc-form` 提供的 `wrappedComponentRef`**。

这不是一个“风格建议”，而是明确的使用方式。

文档里已经给出了非常直白的说明：经过 `Form.create` 之后如果要拿到 `ref`，可以使用 `wrappedComponentRef`。而且 `rc-form` 也专门说明了这一点——在相关场景中，应当使用 `wrappedComponentRef`，而不是其他旧方式。

换句话说，问题的重点不是“能不能想办法绕过去”，而是**这个场景本来就有一条明确的官方路径**。

## 为什么 `Form.create` 之后事情会变复杂

`Form.create` 本质上是一个高阶组件。它并不是简单给原组件“加几个 props”就完事，而是把原始表单组件包了一层增强逻辑。

这层增强带来的好处很直接：表单能力被统一注入，像 `getFieldDecorator`、字段管理、校验机制等都被纳入同一个体系里。但代价也很明显——**你面对的已经不再是原始组件本身，而是包装后的组件**。

于是，“我给这个组件加个 `ref` 不就行了”这件事，突然就没有想象中那么直接了。

因为 `ref` 指向谁，不再只是一个表面问题。你以为自己指向的是业务组件实例，实际上拿到的可能是包装层；你以为能直接从实例上拿 `form`，但真正暴露出去的对象结构却并不总是你想的那样。

也正因为如此，`wrappedComponentRef` 才显得重要。它像是这层包装关系里专门留出的一个出口，让你能够回到被包装的那个组件实例。

## 文档给出的标准做法

文档示例很明确：

```jsx
class CustomizedForm extends React.Component { ... }

// use wrappedComponentRef
const EnhancedForm =  Form.create()(CustomizedForm);
<EnhancedForm wrappedComponentRef={(form) => this.form = form} />
this.form // => The instance of CustomizedForm
```

这里的逻辑非常清楚。

`CustomizedForm` 是原始组件，`EnhancedForm` 是经过 `Form.create()` 包装后的组件。此时如果你希望在外部拿到 `CustomizedForm` 的实例，就应该通过 `wrappedComponentRef` 来接收它。最终 `this.form` 指向的，是 **CustomizedForm 的实例**。

这意味着在类组件体系里，`wrappedComponentRef` 并不是“补丁式写法”，而是这套机制下正确、直接、符合设计预期的获取方式。

## 函数组件里为什么又要换一套思路

事情到了函数组件这里，又会出现一个很关键的变化：**函数组件本身没有传统意义上的实例**。

这就决定了，哪怕你已经理解了 `wrappedComponentRef` 在类组件中的意义，也不能原样照搬到函数组件上。因为类组件之所以能被拿到实例，是由于它本来就有实例对象；而函数组件没有这个载体，于是就需要一种方式，主动把想暴露的内容“交出去”。

文档对此给出的答案是：**通过 `forwardRef` 和 `useImperativeHandle` 的组合使用，在函数组件中正确拿到 form 实例**。

示例代码如下：

```jsx
import React, { forwardRef, useImperativeHandle } from 'react';
import Form, { FormComponentProps } from 'antd/lib/form/Form';

const FCForm = forwardRef<FormComponentProps, FCFormProps>(({ form, onSubmit }, ref) => {
  useImperativeHandle(ref, () => ({
    form,
  }));
  `...the rest of your form`;
});
const EnhancedFCForm = Form.create<FCFormProps>()(FCForm);
```

这段代码的关键，不在于“用了几个 React API”，而在于它完成了一个角色转换：

- `Form.create` 仍然负责注入 `form`
- 函数组件内部通过 `useImperativeHandle` 明确暴露 `form`
- 外部通过 `wrappedComponentRef` 挂接 `ref`
- 最终，调用方可以通过 ref 拿到那个被显式暴露出来的 `form`

这个过程很像在说：函数组件没有天然实例没关系，但它可以选择把什么能力递出来，而 `form` 就是这里需要递出来的那部分。

## 函数组件的使用方式是怎样的

文档继续给出了使用方式：

```jsx
const TestForm = () => {
  const formRef = createRef<Ref>();
  return (
    <EnhancedFCForm
      onSubmit={() => console.log(formRef.current!.form.getFieldValue('name'))}
      wrappedComponentRef={formRef}
    />
  );
};
```

这段代码其实很值得细看，因为它把整条调用链完整串起来了。

外部定义了 `formRef`，然后通过 `wrappedComponentRef={formRef}` 传给包装后的表单组件。等到提交时，再从 `formRef.current.form` 上取出表单实例并读取字段值。

这说明在函数组件场景下，真正拿到的并不是“组件实例”本身，而是通过 `useImperativeHandle` 暴露出来的那个对象，而这个对象里包含了 `form`。

所以这里的重点不是“函数组件也能拿 ref”，而是**函数组件通过显式暴露，让外界得以拿到 form 实例**。

## 如果改回类组件，路径会更直白

给出的另一段示例，又把组件改成了 `class` 组件。这个版本非常适合帮助人理解：为什么很多类似问题，本质上是组件类型差异导致的。

代码中，`TestForm` 是类组件，经 `Form.create<TestFormProps>()(TestForm)` 包装后得到 `EnhancedForm`。外层 `App` 组件通过 `wrappedComponentRef={this.formRef}` 挂上引用，然后在 `handleSubmit` 中这样取值：

```tsx
const form = this.formRef.current.props.form;
```

接着再调用：

```tsx
form.getFieldValue("name")
```

这里展现出的是类组件场景中一种非常直接的访问方式：`wrappedComponentRef` 拿到的是被包装组件实例，而表单实例则通过该组件的 `props.form` 取得。

这条路径很有代表性：

- 外层拿到的是内部类组件实例
- `form` 是被 `Form.create` 注入到该组件 props 中的
- 因此最终通过 `this.formRef.current.props.form` 访问到表单实例

这种结构也解释了为什么很多人一开始会混淆：因为“拿到 ref”和“拿到 form”并不是完全同一件事，中间其实还隔着一层由 `Form.create` 注入的 props 关系。

## 这类问题的关键，不只是 API 记忆

如果只把这个问题看成“Ant Design 某个 API 应该怎么写”，那理解通常会停在表面。

真正更值得记住的是，它反映了三个非常核心的前端事实：

### 第一，HOC 会改变实例获取路径

一旦组件被高阶组件包装，`ref` 的指向关系就不再天然等于“原组件实例”。这不是偶然行为，而是封装结构带来的直接结果。

### 第二，类组件和函数组件的“实例语义”并不相同

类组件可以被直接引用实例，这是它的天然能力；函数组件没有传统实例，因此只能通过 `forwardRef` 和 `useImperativeHandle` 显式暴露能力。

### 第三，表单实例不等于组件实例

在 `Form.create` 这套模式下，`form` 是注入到组件 props 中的能力对象。你真正想要的，很多时候不是组件本身，而是组件身上的 `props.form`，或者函数组件里被主动暴露出来的 `form`。

这三点一旦想明白，很多“为什么这个 ref 不对”“为什么拿不到 form”“为什么函数组件写法完全不一样”之类的问题，都会一下子变得顺理成章。

## 这次信息给出的启发

结合相关 PR 与文档内容来看，这次讨论其实在提醒一件很朴素、也很容易被忽视的事情：

**在使用 Ant Design 3.x 表单体系时，获取表单实例的方式，必须服从 `Form.create` 的包装模型。**

如果是类组件，就通过 `wrappedComponentRef` 拿到组件实例，再从 `props.form` 中访问表单能力。

如果是函数组件，就通过 `forwardRef` 与 `useImperativeHandle` 主动暴露 `form`，再配合 `wrappedComponentRef` 在外部接收。

这套方式看上去有点绕，但它并不是为了制造复杂，而是在尊重不同组件形态和包装机制下的边界。

## 写在最后

前端开发里，很多“拿不到”的问题，归根结底都不是值真的不存在，而是路径错了。

`Form.create` 带来的包装层，让普通 `ref` 不再足以表达“我想拿到内部表单能力”这个诉求；而 `wrappedComponentRef` 的存在，恰恰就是为了解开这层关系。再往前一步，函数组件因为没有传统实例，又需要借助 `forwardRef` 和 `useImperativeHandle` 把 `form` 明确暴露出来。

于是整件事就从“为什么这么麻烦”，变成了“原来这套机制一直都很讲逻辑”。

当你理解了这条逻辑链，再回头看这些写法，就会发现它们并不是技巧堆砌，而是组件封装、实例边界和表单注入机制共同作用下的一种自然结果。对于依赖 Ant Design 3.x 与 `rc-form` 的项目来说，这不是一个边缘知识点，而是一块非常值得踩稳的地基。

尤其在使用 Ant Design 3.x 的 Form.create 时，这种感觉会格外明显。表单明明已经被高阶组件包装过，页面也能正常渲染，提交流程看上去也没问题，可一旦你想从外部拿到表单实例，事情就开始变得微妙起来：ref 好像拿到了，但又不是你真正需要的那个；想访问 form，结果发现路径不对；组件一旦换成函数组件，拿实例这件事又立刻变成了另一套话语体系。

让 `wrappedComponentRef` 真正回到该去的地方：一次围绕 Ant Design 表单实例获取方式的修正

有些前端问题，看起来像“语法没写对”，其实本质上是 组件模型没对齐。尤其在使用 Ant Design 3.x 的 Form.create 时，这种感觉会格外明显。

技术副总监/联合创始人

前端

AntDesign3.x表单实例获取的正确方式：类组件需使用wrappedComponentRef获取组件实例后访问props.form，函数组件需结合forwardRef和useImperativeHandle显式暴露form实例。理解HOC包装机制和组件类型差异是解决表单引用问题的关键，避免因路径错误导致开发困扰。

代码解释

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

让 `wrappedComponentRef` 真正回到该去的地方：一次围绕 Ant Design 表单实例获取方式的修正-腾讯云开发者社区-腾讯云

让 `wrappedComponentRef` 真正回到该去的地方：一次围绕 Ant Design 表单实例获取方式的修正

让 `wrappedComponentRef` 真正回到该去的地方：一次围绕 Ant Design 表单实例获取方式的修正

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐