函数组件中使用forwardRef后ref.current为null的问题咨询

你的核心问题是对forwardRef的使用逻辑理解有误，主要存在两个关键错误：

错误1：父组件未正确传递ref #

你把ref作为自定义props（ref_input）传递给子组件，但forwardRef的机制是接收组件的原生ref属性，而非自定义props。父组件里的ref_input始终是{current: null}，就是因为没有通过正确的通道绑定到子组件。

错误2：子组件对ref的调用逻辑错误 #

子组件中你试图通过ref_input?.current?.clear()调用方法，但即便传递正确，forwardRef传递过来的ref已经是包含current的ref对象，绑定到TextInput后，直接操作ref.current即可，但前提是传递通道要正确。

修正后的代码 #

父组件LoggedInHome #

export function LoggedInHome({ navigation }) {
    const ref_input = useRef();
    function focusInput() {
        ref_input.current?.focus()
    }
    // 原有的focusInput调用逻辑可保留，现在会正常生效
    return (
        // ...其他代码
        <MainInput navigation={navigation} ref={ref_input} />
    )
}

子组件MainInput #

const MainInput = forwardRef(function MainInput({ navigation }, inputRef) {
    let swipeableRow: Swipeable;
    
    const updateRef = (ref: Swipeable) => {
        swipeableRow = ref;
    };

    // 清除输入框的逻辑，现在可正常调用
    const clearInput = () => {
        inputRef.current?.clear();
    };

    return (
        <Swipeable
            // ...其他属性
            ref={updateRef}
        >
            <View>
                <TextInput
                    // ...其他属性
                    ref={inputRef}
                />
            </View>
        </Swipeable>
    );
});

额外说明 #

如果子组件需要频繁操作输入框ref，也可以在子组件内部定义本地ref，同步父组件传递的ref：

const localInputRef = useRef(null);
// 同步父组件的ref
useEffect(() => {
    localInputRef.current = inputRef.current;
}, [inputRef]);
// 之后用localInputRef.current?.clear()调用即可

内容的提问来源于stack exchange，提问作者Allen Y