react如何在父组件中调用子组件事件

import React,{Component} from 'react';
// 这是子组件
class A extends Component{
    componentDidMount() {
        this.props.fn(this)
    }
    state = {
        count:1
    }
    render() {
        let { count } = this.state;
        return (
            <div>
               子组件的值： {count}
            </div>
        )
    }
}
// 这是父组件
class B extends Component{
    // 这个事件是为了拿到子组件的this
    fn_getThis = (_this) => {
        this.$child=_this
    }
    // 已经拥有子组件this，可以随意调用子组件事件了
    increment = () => {
        this.$child.setState(state => {
         return {count:state.count+1}
     })   
    }
    render() {
        return (
            <div>
                <A fn={this.fn_getThis} />
                <button onClick={()=>{this.increment()}}>
                    父组件的按钮
                </button>
            </div>
        )
    }
}
export default B;

useImperativeHandle：可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，
  应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用。
  语法：  useImperativeHandle(ref, createHandle, [deps])
forwardRef：一个函数，返回一个拥有第二个参数的组件

import React,{useRef,useImperativeHandle ,forwardRef,useState} from 'react';
// 这是子组件
const A = (props,ref) => {
    let [count, setCount] = useState(0)
    useImperativeHandle(ref, () => {
        return {
            imcrement:() => {
                setCount(value => {
                    return value + 1
                })
            }        
        }
    })
    return (
        <div>
            {count}
        </div>
    )
}
const NewA = forwardRef(A)
// 这是子组件
const B = () => {
    let refA = useRef();
    const fn_sonImcrement = () => {
      refA.current.imcrement()
    }
    return(
        <div>
            <NewA ref={refA} />
            <button onClick={()=>{fn_sonImcrement()}}>按钮</button>
        </div>
    )
}
export default B;