无法通过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 来访问refs函数

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)