react 中通过ref获取高阶（HOC）子组件实例的解决方案

在React中，高阶组件（HOC）是一种用于复用组件逻辑的高级技巧。有时，你可能需要从外部组件访问HOC包装后的子组件实例。这可以通过React的ref属性和forwardRef API来实现。

以下是一个简单的例子，演示如何通过ref和forwardRef获取高阶组件子组件的实例：

import React, { Component, forwardRef, useImperativeHandle, useRef } from 'react';
 
// 高阶组件
const withSubComponentRef = WrappedComponent => {
  class WithSubComponentRef extends Component {
    constructor(props) {
      super(props);
      this.subComponentRef = React.createRef();
    }
 
    render() {
      return <WrappedComponent {...this.props} subComponentRef={this.subComponentRef} />;
    }
  }
 
  // 使用forwardRef使得父组件可以通过ref获取到WithSubComponentRef的实例
  return forwardRef((props, ref) => {
    return <WithSubComponentRef {...props} forwardedRef={ref} />;
  });
};
 
// 被包装的子组件
const SubComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    // 暴露给父组件的方法
    someMethod: () => alert('Some method called!')
  }));
 
  return <div>Sub Component</div>;
});
 
// 使用高阶组件
const EnhancedComponent = withSubComponentRef(SubComponent);
 
class App extends Component {
  componentDidMount() {
    if (this.subComponentRef.current) {
      this.subComponentRef.current.someMethod();
    }
  }
 
  render() {
    return (
      <div>
        <EnhancedComponent ref={this.subComponentRef} />
      </div>
    );
  }
}
 
App.subComponentRef = createRef();
 
export default App;

在这个例子中，EnhancedComponent是一个高阶组件，它通过forwardRef接收一个ref并将其传递给SubComponent。App组件将这个ref绑定到一个实例属性上，这样它就可以访问SubComponent暴露出的方法了。