Question

我有两个组件都使用connect 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：无法读取null的属性'getWrappedInstance'”

   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进行。

如何在两个组件上结合使用带有react-redux的connect HOC的引用？

1 个答案: