如何使用 refs 和 react-redux 在两个组件上连接 HOC？

Question

我有两个组件都使用连接 HOC。

import {connect} from "react-redux";
import ComponentB from "./ComponentB";
 
class ComponentA extends Component {
  render(){
    return {
        <div>
      <button
       onClick={this.refs.ComponentB.showAlert()}
      >
       Button
      </button>

      <ComponentB
       ref={instance => {
          this.ComponentB = instance.getWrappedInstance();
       }}
      />

    </div>
    }
  }
}

export default connect(mapStateToProps, {}, null, {withRef: true})(ComponentA)

将 ComponantA 与 connect HOC 结合使用会给我错误“TypeError: Cannot read property 'getWrappedInstance' of null”

   export default ComponantA;

不使用 HOC 不会给我这个错误。

import {connect} from "react-redux";
class ComponentB extends Component {
 showAlert = () => {
    alert("Please Work");
  }
 
render(){
 return {
     <div>ComponentB</div>
    }
  }
}
 
export default connect(mapStateToProps, {}, null, {withRef: true})(ComponentB)

Answer 1

React.createRef 是在 React 16.3 中引入的，应该像这样使用：

this.componentBRef = React.createRef();
...

  <button
   onClick={() => this.componentBRef.current.getWrappedInstance().showAlert()}
  >
   Button
  </button>

  <ComponentB
   ref={this.componentBRef};
   }}
  />

正如this answer 中所述，createRef 中使用的模式允许通过current 属性延迟访问引用，因为this.componentBRef.current 最初是null。

由于使用了 Redux，因此组件之间的交互可能应该通过 Redux 来执行。