React Native：如何通过ref访问组件的自定义方法？

问题根源 #

你遇到的ref.wrappedInstance.function1不存在的情况，基本是因为Form1被高阶组件（HOC）（比如react-redux的connect、自定义包装组件）包裹过，wrappedInstance指向的是HOC的内部实例，而非你定义的Form1本体，因此无法直接访问到组件自身的方法。

可行解决方案 #

1. 针对react-redux的connect场景 #

如果Form1是用connect包装的，在调用connect时开启forwardRef配置，让ref穿透HOC指向原始组件：

import { connect } from 'react-redux';

class Form1 extends Component {
  function1 = () => { /* 你的业务逻辑 */ };
  render() { return (...); }
}

// 开启forwardRef选项
const ConnectedForm1 = connect(
  mapStateToProps,
  mapDispatchToProps,
  null,
  { forwardRef: true } // 关键配置
)(Form1);

// 父组件使用时直接获取ref，无需wrappedInstance
<ConnectedForm1
  ref={ref => { this.form = ref; }}
  var1="hello"
/>

// 现在可以直接调用方法
this.form.function1();

2. 用React.forwardRef传递ref（自定义HOC场景） #

如果是自定义HOC包装Form1，使用React.forwardRef显式把ref传递给目标组件：

const withCustomHOC = (Component) => {
  return React.forwardRef((props, ref) => {
    // HOC的逻辑处理
    return <Component {...props} ref={ref} />;
  });
};

// 包装Form1
const WrappedForm1 = withCustomHOC(Form1);

// 父组件中使用
<WrappedForm1
  ref={ref => { this.form = ref; }}
  var1="hello"
/>

// 调用组件方法
this.form.function1();

3. 通过props回调暴露方法（无ref依赖） #

如果不想依赖ref，更推荐用props回调的方式把组件实例传递给父组件：

// Form1组件内部
class Form1 extends Component {
  function1 = () => { /* 你的业务逻辑 */ };

  componentDidMount() {
    this.props.onGetComponentRef(this);
  }

  componentWillUnmount() {
    this.props.onGetComponentRef(null);
  }

  render() { return (...); }
}

// 父组件中使用
<Form1
  var1="hello"
  onGetComponentRef={(ref) => { this.form = ref; }}
/>

// 调用方法
this.form.function1();

注意点 #

• 避免直接依赖wrappedInstance，这属于HOC的内部实现细节，不同库的处理逻辑可能有差异，存在兼容性风险。
• 优先选择props回调或forwardRef的方式，这是React官方推荐的组件通信方案。

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