React中正确传递useRef给子组件的方法

本文深入解析为何不能直接将 useRef 对象作为 props 传入普通函数组件，并演示如何通过 forwardRef 实现安全、符合 React 最佳实践的 ref 透传，帮助开发者掌握正确的 useRef 子组件传递方法。

在 React 开发中，useRef 是操作 DOM 或存储可变数据的重要工具。然而，当你尝试将这个 ref 作为 props（例如：todoRef={todoRef}）直接传递给子组件时，表面可能看似正常运行，但实际上这是一个常见的陷阱——普通函数组件默认并不接收 ref。React 会静默地忽略该 prop，既不报错，也不创建真正的 ref 绑定。

举个例子：假设你有一个名为 InputField 的普通函数组件，即使你在其内部使用了 ref={todoRef}，由于组件未开启 ref 转发，父组件中的 todoRef.current 将始终为 null（或初始值）。你所看到的“似乎正常工作”的错觉，通常源于浏览器缓存、输入框焦点状态的残留或不当的调试时机。不妨在 onFormSubmit 中添加一行 console.log(todoRef.current)，真相即刻显现——值确实为空。

那么正确的做法是什么？使用 forwardRef 显式启用 ref 转发。

import { forwardRef } from 'react';

const InputField = forwardRef(function InputField({ onFormSubmit }, ref) {
  return (
    

      
    
  );
});

关键细节：forwardRef 接受一个双参数函数——props 和 ref，其中 ref 作为第二个参数显式注入。组件内部必须将这个 ref 绑定到具体的 DOM 元素（例如 ）。这样，父组件中的 useRef 才能正确关联到子组件中的 input 实例，实现安全的 forwardRef ref 透传。

⚠️ 以下几点值得特别注意：

• 切勿将 ref 解构到 props 中（例如 ({ onFormSubmit, todoRef })），这样会丢失 ref，导致无法正确绑定。
• forwardRef 组件应作为命名导出或默认导出，避免在渲染逻辑中动态定义，否则每次渲染都会生成新组件，造成 ref 重置，影响稳定性。
• 如果子组件还需接收其他 ref（例如来自自定义 hook 的 ref），应统一交由 forwardRef 管理，不要混合使用 props 传递 ref，保持代码清晰。
• 类组件天然支持 ref 接收，而函数组件必须使用 forwardRef——这是 React 的设计规范，并非缺陷，符合 React ref 传递的最佳实践。

总结：forwardRef 并非高深莫测的“高级技巧”，而是函数组件参与 ref 体系的标准契约。绕过它，改用 props 直接传递 ref，属于典型的反模式：表面流畅，实则脆弱、不可靠，且问题难以调试。养成良好习惯——只要涉及 ref 透传，第一步就是使用 forwardRef，这样才能在 React 中正确地将 useRef 传递给子组件，确保代码健壮性与可维护性。