javascript如何实现引用转发_ ref forwarding是什么

Ref forwarding 是 React 提供的透传 ref 机制，使父组件 ref 能直达子组件内部 DOM 节点；需用 React.forwardRef 包裹组件，并将 ref 显式绑定到目标元素，支持逐层透传与自定义 Hook 协同。

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

为什么需要 ref forwarding？

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

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

基本写法：React.forwardRef

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

立即学习“Java免费学习笔记（深入）”；

论小文

可靠的论文写作助手，包含11种学术写作类型，万字论文一键生成，可降重降AIGC，参考文献真实可标注，图表代码均可自定义添加。

435

查看详情

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>、<div> 或另一个用 forwardRef 包装的组件） <li>不能在 class 组件或普通函数组件里直接解构 <code>{ 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 绑定到该去的地方。