React父子组件互相通信的实现示例
作者：白鲸ld
React中是单向数据流,数据只能从父组件通过属性的方式传给其子组件,本文主要介绍了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具体含义。
到此这篇关于React父子组件互相通信的实现示例的文章就介绍到这了,更多相关React父子组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！