本文详解 React 中自定义组件无法接收父级 ref 的根本原因，并通过 forwardRef 实现安全、类型安全的 ref 转发，确保父组件能准确访问子组件内部的 DOM 节点。
本文详解 react 中自定义组件无法接收父级 `ref` 的根本原因，并通过 `forwardref` 实现安全、类型安全的 ref 转发，确保父组件能准确访问子组件内部的 `` dom 节点。
在 React 中，普通函数组件或类组件默认不支持接收来自父组件的 ref 属性——这不是 Bug，而是设计约束：React 为防止意外暴露内部 DOM 节点、破坏封装性，默认拦截 ref 传递。当你在自定义组件（如 MyInput）的 props 类型中显式声明 ref?: React.RefObject<htmlinputelement></htmlinputelement>，TypeScript 会报错，因为 ref 不是普通 props，而是一个特殊的 React 内部机制，必须通过 React.forwardRef 显式启用。
✅ 正确做法：使用 forwardRef 包裹组件，并指定泛型参数明确转发目标类型：
import * as React from "react";
type MyInputProps = {
value: string | null | undefined;
label?: string | React.ReactNode;
autofocus?: boolean;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
placeholder?: string;
};
// ✅ 使用 forwardRef，明确转发到 HTMLInputElement
export const MyInput = React.forwardRef<HTMLInputElement, MyInputProps>(
(props, ref) => {
return (
<div>
{props.label && <label>{props.label}</label>}
<input
ref={ref} // ? ref 被正确绑定到原生 input
value={props.value ?? ""}
onChange={props.onChange}
autoFocus={props.autofocus}
placeholder={props.placeholder}
type="text"
/>
</div>
);
}
);
// 可选：添加 displayName 便于调试
MyInput.displayName = "MyInput";⚠️ 注意事项：
-
forwardRef的第一个泛型参数（HTMLInputElement）必须与你最终绑定ref的 DOM 元素类型一致，否则类型检查失败； -
ref参数在函数组件签名中是第二个参数（不可省略），且不能解构到 props 中（如{ ref, ...rest }是错误的）； - 若
MyInput是第三方库组件且源码不可修改，则无法直接forwardRef—— 此时需改用useImperativeHandle封装可控方法（如focus()、select()），或包裹一层转发组件。
在父组件中即可安全使用：
function ComponentA() {
const inputRef = React.useRef<HTMLInputElement>(null);
const handleFocusAndSelect = () => {
inputRef.current?.focus();
inputRef.current?.select();
};
return (
<div>
<MyInput
value="John Doe"
onChange={(e) => console.log(e.target.value)}
placeholder="Enter name"
autofocus={true}
ref={inputRef} // ✅ 类型匹配，无 TS 报错
/>
<button onClick={handleFocusAndSelect}>Select text</button>
</div>
);
}? 总结：ref 不是普通 prop，它需要显式“开通权限”。React.forwardRef 是官方推荐且唯一标准的方式，既满足类型安全（TypeScript 可推导 ref 类型），又保障运行时正确性。避免手动在 props 中声明 ref，也切勿尝试绕过 forwardRef 直接赋值——这将导致类型错误、ref.current 始终为 null，以及潜在的 React 行为不一致问题。
