React父子组件互相通信的实现示例

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;

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)