React Native自定义数字输入组件：forwardRef传递ref的作用疑问

核心原因：透传ref到内部原生输入组件，保留原生组件的可操作性 #

自定义组件在React中默认是"封装隔离"的——父组件给自定义组件加的ref，默认只能指向自定义组件本身的实例，没法直接访问组件内部的子组件（比如这里的BaseTextInput/底层的RNTextInput）。而React.forwardRef的作用就是打破这个隔离，把父组件传入的ref透传给组件内部指定的原生/基础组件，让父组件能直接操作底层输入框的实例。

具体场景需求 #

当父组件使用你的NumericInput时，可能需要执行原生输入框的常用操作，比如：

• 调用focus()让输入框自动获取焦点
• 调用blur()让输入框失去焦点
• 获取输入框的当前光标位置、选中范围
• 直接修改输入框的内容（比如重置输入）

如果不用forwardRef，父组件拿到的ref指向的是NumericInput这个自定义组件实例，而这个实例并没有上述这些RNTextInput的方法，自然无法完成这些操作。

结合你的代码看逻辑 #

你的代码里：

1. 用React.forwardRef<RNTextInput, Props>声明组件，接收父组件传入的ref参数
2. 把这个ref直接传递给内部的<BaseTextInput ref={ref} />
3. 最终这个ref会指向BaseTextInput底层的RNTextInput实例

这样父组件使用NumericInput时，写法和直接用RNTextInput完全一致：

const inputRef = useRef<RNTextInput>(null);

// 在需要的地方调用原生方法
inputRef.current?.focus();

// 渲染组件
<NumericInput ref={inputRef} />

总结 #

forwardRef在这里的作用就是保持自定义组件的封装性，同时开放对底层原生输入组件的实例访问权限，让你的NumericInput既保留了数字输入的封装逻辑，又能像原生RNTextInput一样被父组件灵活控制。

内容的提问来源于stack exchange，提问作者ALEX YT