父组件是如何使用子组件的事件的，下边数值累加的例子

类组件

将子组件的this传到父组件，给父组件添加一个属性，值为this，之后就可以通过父组件的属性调用子组件的事件了

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{// 这个事件是为了拿到子组件的thisfn_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;

函数组件

useRef,useImperativeHandle ,forwardRef 3个api的配合使用

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;