使用Recompose组件作为Ref时丢失函数方法的问题求助

这个问题我之前踩过坑！核心原因是Recompose的高阶组件（HOC）会把你的原组件App包裹在一层容器组件里，当你直接给包装后的组件传ref时，拿到的其实是这层容器的实例，而不是你真正需要的App组件实例，所以自然访问不到a、b、c这些方法。

下面给你两种靠谱的解决方案：

方案一：用Recompose自带的withRef API #

Recompose专门提供了withRef高阶函数来处理这个场景，它会让包装后的HOC暴露一个getWrappedInstance()方法，通过这个方法就能拿到原组件的实例。

步骤： #

1. 用withRef()包裹你的增强逻辑（放在compose的最外层或者合适的位置）
2. 在获取ref的回调里，调用getWrappedInstance()拿到原组件实例

示例代码：

import { compose, withRef } from 'recompose';

// 假设你之前是这样包装App的
const WrappedApp = compose(
  withRef(), // 加上这一行
  // 你的其他增强HOC，比如withState、withHandlers等
)(App);

// 然后在BApp里修改ref回调
class BApp extends React.Component {
  setComponentRef = ref => {
    if (ref) {
      // 通过getWrappedInstance获取原App实例
      this.playerComponentRef = ref.getWrappedInstance();
      console.log('ref', this.playerComponentRef); // 现在能看到a、b、c方法了
    }
  }
  render() {
    return (
      <div>
        <WrappedApp ref={this.setComponentRef} />
      </div>)
  }
}

方案二：用React原生的forwardRef（推荐现代项目使用） #

如果你的React版本支持forwardRef（React 16.3+），更推荐用这个原生API来传递ref，它比Recompose的withRef更符合React的设计思路，也不需要依赖Recompose的特定方法。

步骤： #

把你自定义的Recompose HOC改成用forwardRef包裹，让ref直接透传到原组件。

示例代码：

import { compose } from 'recompose';

// 把你的增强HOC改成支持forwardRef的版本
const withMyEnhancement = Component => 
  React.forwardRef((props, ref) => {
    // 这里写你的增强逻辑，比如添加props、处理状态等
    return <Component {...props} ref={ref} />;
  });

// 用这个增强HOC包装App
const WrappedApp = compose(
  withMyEnhancement,
  // 其他增强HOC
)(App);

// 然后在BApp里直接用ref就行，和你之前直接引用App的方式完全一样
class BApp extends React.Component {
  setComponentRef = ref => {
    console.log('ref', ref); // 直接拿到App实例，包含a、b、c方法
    this.playerComponentRef = ref;
  }
  render() {
    return (
      <div>
        <WrappedApp ref={this.setComponentRef} />
      </div>)
  }
}

注意事项 #

• 如果你用的是Recompose内置的HOC（比如withState、withHandlers），它们本身是支持和forwardRef配合使用的，只要你在最外层用forwardRef把ref传递下去就行。
• 不管用哪种方案，都要确保在组件挂载完成后再调用原组件的方法（比如在componentDidMount里），避免因为ref还未初始化导致报错。

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