forwardRef 转发引用
最后更新：2026-10-28
forwardRef 转发引用
函数组件默认不接收 ref。forwardRef 把父组件传入的 ref 转发给内部某个 DOM 节点，让「自定义输入框、按钮」这类封装组件也能像原生元素一样被聚焦、测量。React 19 起可直接收 ref，旧版本必须用它。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | API |
| 引入版本 | React 16.3 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const FancyInput = forwardRef(function FancyInput(props, ref) {
return <input ref={ref} {...props} /> // 挂到真实 DOM
})
// 使用：<FancyInput ref={inputRef} />⚙️ 参数
| render 函数 | (props, ref) => JSX。第二个参数 ref 即父组件传入的引用，须挂到真实 DOM 或再转发的组件上。 |
|---|
返回值：返回带 ref 转发能力的新组件：父组件的 ref.current 将指向 render 内部挂载的节点。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点按钮后蓝框输入框获得焦点并清空内容——ref 穿过了 FancyInput 的封装，直达内部真实 input。💡 要点
💡 提示 React 19 中函数组件可直接接收 ref prop，无需再包 forwardRef；旧版本必须用它。
ℹ️ 说明 ref 参数必须挂到真实 DOM 元素上，挂到普通组件不转发则收不到。
⚠️ 注意 不要滥用转发 ref 操纵子组件内部——优先暴露声明式 props；需要更多命令式接口时配合 useImperativeHandle。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 为什么函数组件不能直接收 ref？
A 函数组件没有实例，ref 无处可挂；React 18 及以前把 ref 排除在 props 之外，需 forwardRef 显式转发。
Q React 19 有什么变化？
A ref 成为普通 prop，函数组件直接写 function Cmp({ ref }) 即可，forwardRef 不再必需（仍兼容）。
Q useImperativeHandle 和直接转发有什么区别？
A 直接转发暴露整个 DOM；useImperativeHandle 可自定义暴露的方法集合（如 focus/clear），隐藏内部实现。
