React ref 返回一个“Connect”对象而不是 DOM

使用React的ref属性，我们可以获取到组件实例或者DOM元素的引用。通常情况下，我们会使用ref来访问DOM元素的属性和方法，或者直接操作DOM。然而，有时候我们希望能够获取到组件实例而不是DOM元素。

javascript
import React, { Component } from 'react';
function connectRef(WrappedComponent) {
  class ConnectRef extends Component {
    constructor(props) {
      super(props);
      this.ref = React.createRef();
    }
    componentDidMount() {
      // 在组件挂载后，我们可以通过this.ref.current获取到组件实例
      console.log(this.ref.current);
    }
    render() {
      // 返回被包裹的组件，并将ref属性设置为this.ref
      return ;
    }
  }
  return ConnectRef;
}

javascript
class MyComponent extends Component {
  // ...
}
const ConnectedComponent = connectRef(MyComponent);
class App extends Component {
  componentDidMount() {
    // 在App组件中，我们可以通过使用ConnectedComponent的ref属性来获取到MyComponent的实例
    console.log(this.myComponentRef.current);
  }
  render() {
    return ;
  }
}