在老项目里不断加新功能、跨国沟通、被迫遵循外部代码审查，我常常陷入没有话语权、代码被“宰割”的痛点。是当业务需求只剩下「必须加」而无压力时往往会耗费大量时间去寻找方法。正因如此，掌握 React 中能够让你更灵活、更高效地与子组件交互的工具变得尤为关键——那就是 forwardRef。

从使用者痛点来看，底层开发者如何快速定位与控制子组件？

作为最底层的 coder，频繁遇到以下情况：

• 无法直接把 ref 传递给函数组件；
• 父组件想让子组件聚焦、清空或测量尺寸，却只能通过 props 或回调间接实现；
• 第三方库需要挂载到 DOM 上，但无法在自定义 UI 里暴露 ref；按理说，
• 代码审查要求保持一致性。却缺少一个统一的模式来转发引用。

这些问题导致开发效率低下、团队协作受阻。

React 的 forwardRef 是干什么用的？

为什么需要 forwardRef？

React 的 ref 默认不会像普通 props 那样传递给函数组件。如果直接在函数组件上绑定 ref，会收到警告且无法获取内部 DOM。forwardRef 正是为了解决这个限制而出现的，使得父组件可以将引用“转发”到子组件内部真正的 DOM 节点或类组件实例上。

主要语法

const ChildComponent = React.forwardRef => {
// props: 父组件传入的普通属性
// ref: 父组件通过 ref=xxx 传入的引用
return (

内容

);})，

再看完整实战示例，可聚焦输入框

从子组件来看。FancyInput

import React,{ forwardRef } from 'react';const FancyInput = forwardRef => {
return (

{label}
{/* ✅ 将收到的 ref 绑定到真正的 DOM input 元素上 */}


);})，FancyInput.displayName = 'FancyInput';export default FancyInput;

再看父组件。使用 ref 控制子组件

import React,{ useRef } from 'react';import FancyInput from './FancyInput';function ParentForm {
const inputRef = useRef;const handleFocus = => {
// ✅ 可以直接访问子组件内部真实 DOM 节点
inputRef.current?.focus，};const handleClear = => {
if {
inputRef.current.value = '';
inputRef.current.focus;}
}，return (

{/* ✅ 把 ref 当作普通属性一样传给被 forwardRef 包裹的 component */}

聚焦输入框
清空并聚焦

);}
export default ParentForm;

从进阶用法来看，暴露自定义方法

有时你不想把整个 DOM 暴露给父级，而是只想让父级调用特定的方法。例如获取值或重置：

import React,{ forwardRef,useImperativeHandle } from 'react';const CustomSelect = forwardRef => {
const selectEl = useImperativeHandle;})，怎么说呢，...
// 父级调用示例：
const selectHandler = useSelect;// 假设已经创建了相应 hook
selectHandler.getValue;// ✅ 返回当前选择值
selectHandler.reset;// ❌ 不会触发 focus 等原生方法，因为我们没有暴露它们

通过 useImperativeHandle。可以精准控制哪些实例方法对外公开，从而保持 API 简洁且安全。话说回来，

关键注意事项

• 仅适用于函数式组件。
• 不能将 Ref 挂载到另一个函数式组件上；若要这样做，需要该目标也使用 .forwardRefs.
• 记得设置 displayName。否则 DevTools 会显示为 “ForwardedComponent”，难以定位。
• 优先通过 Props/State/Callback 通信；只在命令式操作时才使用 Ref。
• 如果你正在维护旧项目或者跨团队协作。请先确认是否能避免滥用 Ref，以免影响可维护性。
• React ≥ 18 开启了“ref as prop”功能，可以考虑逐步迁移到纯 Props 的写法。

何时该用 Forward Ref？

• ✅ 封装 UI 库中的 Button / Input / Modal 等。让使用者可以访问真实 DOM 或类实例，实现聚焦等命令式操作。
• ✅ 集成第三方非 React 库，需要把图表挂载到某个容器节点上。
• ✅ 实现自动聚焦、滚动到视图、动画触发等需要命令式控制场景。
• ❌ 单纯为了读取子组建 state 或触发重渲染——此时请改用 Props + 状态提高或回调方式！.
• ❌ 用来让父级随意修改内部实现细节 —— 不推荐，违背封装原则！.