React父组件如何调用子组件的方法推荐

import React, { Component } from 'react';
class Sub extends Component {
  callback() {
    console.log('执行回调');
  }
  render() {
    return <div>子组件</div>;
  }
}
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>
    );
  }
}

...
<Sub ref={ref => this.sub = ref}></Sub>
...

import React, { Component } from 'react';
import { observer } from 'mobx-react'
@observer
class Sub extends Component {
    componentDidMount(){
    // 将子组件指向父组件的变量
        this.props.onRef && this.props.onRef(this);
    }
    callback(){
        console.log("执行我")
    }
    render(){
        return (<div>子组件</div>);
    }
}
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>)
    }
}

import React, { useImperativeHandle } from 'react';
import { observer } from 'mobx-react'
const Parent = () => {
  let ChildRef = React.createRef();
  function handleOnClick() {
    ChildRef.current.func();
  }
  return (
    <div>
      <button onClick={handleOnClick}>click</button>
      <Child onRef={ChildRef} />
    </div>
  );
};
const Child = observer(props => {
  //用useImperativeHandle暴露一些外部ref能访问的属性
  useImperativeHandle(props.onRef, () => {
    // 需要将暴露的接口返回出去
    return {
      func: func,
    };
  });
  function func() {
    console.log('执行我');
  }
  return <div>子组件</div>;
});
export default Parent;

import React, { useRef, useImperativeHandle } from 'react';
import ReactDOM from 'react-dom';
import { observer } from 'mobx-react'
const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} type="text" />
});
const Sub = observer(FancyInput)
const App = props => {
  const fancyInputRef = useRef();
  return (
    <div>
      <FancyInput ref={fancyInputRef} />
      <button
        onClick={() => fancyInputRef.current.focus()}
      >父组件调用子组件的 focus</button>
    </div>
  )
}
export default App;