React的父子组件互相通信

在写项目的时候遇到了父子组件互相调用对方的方法，然后知道用什么逻辑写，但是就是没写对过，开始用的props和ref,但是报错就去用的context,context在引用的时候还是报错，所以最后还是用的props和ref,下边是实现的案例。
父组件 Father.tsx

import React, { useState, useRef } from 'react';
import Child from './components/child'
const Father = ()=>{
	const childRef = useRef<any>();
	const params = {所需参数....}
	const dataList = async (params: any) => {
        try {
            const { ret, data } = await specialList(params);
            if (ret === 1) {
                处理的逻辑....
            }
        } catch (error) {
            console.log(error);
        }
    }
    //调用子组件的方法，看要在哪里调用就在哪里使用
	await childRef?.current.infosItem();
	return (
		<>
			<Child datalist={dataList} ref={childRef}/>
		</>
	)
}
export default Father;

子组件：child.tsx

import React, { useEffect, useState, forwardRef, useImperativeHandle } from 'react';
const Child = (props: any,ref: any)=>{
	const { datalist } = props;
	const infosItem = async () => {
        try {
            const { ret, data } = await infos(params);
            if (ret === 1) {
      			//处理业务逻辑...
            }
        } catch (error) {
           console.log(error);
        }
    };
    const par = {datalist需要的参数};
    await datalist(par) //在需要的时候调用
    //将这个方法暴露出来，让父组件可以调用
    useImperativeHandle(ref, ()=>({
        infosItem
    }));
    return (
    	<></>
	)
}
export default forwardRef(Child)

我这个业务是编辑，就是子组件编辑之后父组件的数据要变化，父组件编辑子组件也要变化，我开始认为就是点击编辑框上的确定之后调用对方方法，但是发现并没有起效果，一直认为还是自己通信问题，后来换了一下调用的地方，就起效果了，要放在调用编辑接口那个地方，因为异步问题。目前就用的props和ref来实现父子之间的通信的，还有其他通信方式，等用到了再更新吧。
useImperativeHandle可以看这个Hook具体含义。