React 类组件中父组件如何调用子组件的方法

这篇文章里的写法都是 React 类组件，我使用第二种方法成功了

看了这篇文章，我用下面的方法写父组件调用子组件方法，但是没有成功

未成功的写法

import React, { Component } from 'react'

// 父组件
class Super extends Component {
  constructor(props) {
    super(props);
    this.sub = React.createRef();
  }
  handleOnClick() {
    this.sub.callback();
  }
  render() {
    return (
      <div>
        <Sub ref={this.sub}></Sub>
      </div>
    );
  }
}

// 子组件
class Sub extends Component {
  callback() {
    console.log('执行回调');
  }
  render() {
    return <div>子组件</div>;
  }
}

我注意到他的文章里面有一句话：使用了 HOC 的子组件不可用，无法指向真实子组件。

我猜想我的组件用 Redux 的 connect 包裹了组件，导致上面的写法不成功。

然后我使用了下面的写法成功了

成功的写法

import React, { Component } from 'react'

// 父组件
class Super extends Component {
  handleOnClick(){
    // 可以调用子组件方法
    this.Sub.callback();
  }
  render(){
    return (
      <div>
        <div onClick={this.handleOnClick}>click</div>
        <Sub onRef={ node => this.Sub = node }></Sub>	
      </div>)
  }
}

// 子组件
class Sub extends Component {
  componentDidMount(){
    // 将子组件指向父组件的变量
    this.props.onRef && this.props.onRef(this);
  }
  callback(){
    console.log("执行我")
  }
  render(){
    return (<div>子组件</div>);
  }
}