React Native 函数组件如何自定义可通过ref外部调用的方法

你需要结合 React 提供的两个 API forwardRef 和 useImperativeHandle 来实现该需求，具体实现逻辑如下：

实现步骤 #

• 使用 forwardRef 包裹你的自定义函数组件，让组件可以接收外部传入的 ref 作为第二个参数
• 在组件内部使用 useImperativeHandle 钩子，将你需要对外暴露的自定义方法挂载到传入的 ref 上

代码示例 #

自定义子组件实现 #

import { forwardRef, useImperativeHandle, useRef } from 'react';
import { TextInput } from 'react-native';

// forwardRef 包裹后，组件第二个参数即为外部传入的ref
const CustomInput = forwardRef((props, ref) => {
  // 先持有内部原生TextInput的ref
  const innerInputRef = useRef(null);

  // 自定义聚焦方法
  const focusCustomInput = () => {
    innerInputRef.current?.focus();
  };

  // 自定义清空方法
  const clearCustomInput = () => {
    innerInputRef.current?.clear();
  };

  // 将需要对外暴露的方法绑定到外部传入的ref
  useImperativeHandle(ref, () => ({
    focus: focusCustomInput,
    clear: clearCustomInput,
    // 可自由添加其他需要对外暴露的自定义方法
  }));

  return <TextInput ref={innerInputRef} {...props} />;
});

export default CustomInput;

父组件调用示例 #

import { useRef } from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import CustomInput from './CustomInput';

const ParentPage = () => {
  const customInputRef = useRef(null);

  const triggerFocus = () => {
    // 直接调用子组件暴露的自定义focus方法
    customInputRef.current?.focus();
  };

  const triggerClear = () => {
    // 调用子组件暴露的自定义clear方法
    customInputRef.current?.clear();
  };

  return (
    <View>
      <TouchableOpacity onPress={triggerFocus}>
        <Text>点击聚焦自定义输入框</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={triggerClear} style={{ marginTop: 12 }}>
        <Text>点击清空自定义输入框</Text>
      </TouchableOpacity>
      {/* 给自定义组件传入ref */}
      <CustomInput ref={customInputRef} placeholder="测试输入" style={{ marginTop: 12 }} />
    </View>
  );
};

export default ParentPage;

注意事项 #

该方案属于命令式编程范式，不要滥用。优先通过props传递状态、回调的方式实现父子组件通信，仅在聚焦、滚动、动画执行等不适合用状态驱动的场景下使用，避免破坏React单向数据流的设计原则。

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