无法通过ref访问子功能？

Question

最初一切正常，我有一个类似的组件。这个

  class A extends React.Component {
     constructor(props) {
       super(props);
       this.childRef = null
     }

    componentDidMount() {
     this.childRef = this.refs.b
     // now I can call child function like this
      this.childRef.calledByParent()
    }

    render(){
      <B ref = "b"/>
    }
  }

在其他档案中

     class B extends React.Component {

       calledByParent(){
         console.log("i'm called")
        }

       render(){
        <div> hello </div>
       }
  }
 export default B

到这里为止一切正常，但是当我在 class B export default connect(mapStateToProps, mapDispatchToProps)(B)

它不起作用。我已经从react-redux导入了connect

Answer 1

connect()接受option为第四参数。在此选项参数中，您可以将flag设置withRef为true。之后，您可以使用getWrappedInstance()like
来访问ref的函数

class A extends React.Component {
     constructor(props) {
       super(props);
       this.childRef = null
     }

    componentDidMount() {
        this.childRef.getWrappedInstance().calledByParent()
    }

    render(){
      <B ref = {ref => this.childRef = ref}/>
    }
  }

class B extends React.Component {

       calledByParent(){
         console.log("i'm called")
        }

       render(){
        <div> hello </div>
       }
  }
   export default  connect(mapStateToProps, mapDispatchToProps, null, {withRef: true})(B)