JavaScript中如何实现引用转发，ref转发详解

Ref forwarding 是 React 提供的一种关键透传机制，让父组件的 ref 能绕过自定义组件封装层，直接抵达内部真实 DOM 节点或深层子组件（而非卡在函数组件边界），它并非 JavaScript 原生能力，而是通过 `React.forwardRef` 这一 API 实现的优雅设计——只需将 ref 作为独立参数接收并显式绑定到目标元素，即可支持聚焦、滚动、动画控制等 DOM 操作；它还能与自定义 Hook、状态逻辑无缝协同，并支持多层组件逐级透传，是构建高复用、可访问、符合 React 最佳实践的 UI 组件不可或缺的一环。

Ref forwarding 是 React 提供的一种“透传 ref”的机制，不是 JavaScript 原生特性，而是 React 的 API 设计模式。它让父组件能将 ref 直接“转发”给子组件内部的某个 DOM 节点或子组件，而不是停留在包装组件这一层。

为什么需要 ref forwarding？

常见场景：你封装了一个自定义按钮组件 MyButton，外面用 React.forwardRef 包一层，但希望父组件调用 ref.current.focus() 时，真正聚焦的是内部的 ，而不是 MyButton 这个函数组件本身（函数组件默认不支持 ref）。

没有 ref forwarding 时，ref 会“卡”在组件边界上，无法触达内部真实 DOM。

基本写法：React.forwardRef

用 React.forwardRef 包裹组件函数，它接收两个参数：props 和 ref，并把 ref 显式地绑定到目标元素上：

const MyInput = React.forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));

// 使用
function App() {
  const inputRef = useRef();
  return <MyInput ref={inputRef} placeholder="点击聚焦" />;
}

• ref 不再是 props 里的一个普通字段，而是被单独抽出来作为第二个参数
• 必须显式把 ref 赋给某个可 ref 的节点（如 <input>、
  或另一个用 forwardRef 包装的组件）
• 不能在 class 组件或普通函数组件里直接解构 { ref } —— 那样 ref 就丢失了

结合自定义 Hook 或复合逻辑使用

ref forwarding 可以和业务逻辑共存。比如你想在输入框获得焦点时自动选中文字：

const SelectableInput = React.forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useEffect(() => {
    if (ref) {
      // 把传入的 ref 和本地 ref 同步（可选）
      if (typeof ref === 'function') ref(inputRef.current);
      else ref.current = inputRef.current;
    }
  }, [ref]);

  const handleFocus = () => {
    inputRef.current?.select();
  };

  return <input ref={inputRef} onFocus={handleFocus} {...props} />;
});

• 这里用本地 inputRef 控制行为，同时把外部 ref “同步”过去，兼顾封装性与可控性
• 注意判断 ref 类型：可能是对象（{ current: ... }）也可能是函数，安全写法需兼容

转发 ref 到另一个自定义组件

如果子组件本身也是用 forwardRef 写的，可以逐层透传：

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="fancy" {...props} />
));

const Wrapper = React.forwardRef((props, ref) => (
  <div className="wrapper">
    <FancyButton ref={ref} {...props} />
  </div>
));

• 只要中间每一层都用 forwardRef 并把 ref 传下去，ref 就能直达最内层 DOM
• 类似“管道”，不拦截、不消耗，只透传

基本上就这些。ref forwarding 不复杂但容易忽略，关键就两点：用 React.forwardRef 包组件，再把收到的 ref 绑定到该去的地方。

到这里，我们也就讲完了《JavaScript中如何实现引用转发，ref转发详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问