Unable to access child function via ref?

Question

Initially everything was working fine,I have a component something like. this

  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"/>
    }
  }

In other file

     class B extends React.Component {

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

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

till here it was working fine but when I do something like this in class B export default connect(mapStateToProps, mapDispatchToProps)(B)

It is not working. I have imported connect from react-redux

Answer 1

connect() accepts option as the forth parameter. In this option parameter you can set flag withRef to true. After this you can access functions to refs by using getWrappedInstance() like

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)

Answer 2

Might be a little late but another (better) solution than using refs is to only give control to specific functions of the component.

class A extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.ctrl_B.calledByParent()
    }

    render(){
        <B provideCtrl={ctrl => this.ctrl_B = ctrl} />
    }
}

class B extends React.Component {

    componentDidMount() {
        this.props.provideCtrl({
            calledByParent: () => this.calledByParent()
        });
    }
    componentWillUnmount() {
        this.props.provideCtrl(null);
    }

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

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