React的父子组件互相通信

news/2024/7/15 18:23:34 标签: react.js, 父子之间通信

在写项目的时候遇到了父子组件互相调用对方的方法,然后知道用什么逻辑写,但是就是没写对过,开始用的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具体含义。


http://www.niftyadmin.cn/n/5221369.html

相关文章

P8A005-A008系统加固

系统账户数据库安全 预备知识】 数据库研究跨越于计算机应用、系统软件和理论三个领域&#xff0c;其中应用促进新系统的研制开发&#xff0c;新系统带来新的理论研究&#xff0c;而理论研究又对前两个领域起着指导作用。 【实验步骤】 网络拓扑&#xff1a;server2008-bas…

Transformer中的多头注意力机制-为什么需要多头?

Transformer为什么使用多头注意力机制呢&#xff1f; 多头可以学习到不同维度的特征和信息。为什么可以学习到不同维度的信息呢&#xff1f; 答案是&#xff1a;多头注意力机制的组成是有单个的self attention&#xff0c;由于self attention通过产生QKV矩阵来学习数据特征&a…

传奇手游白日门【纵横天下】win服务端+双端+GM后台+详细架设教程

搭建资源下载地址&#xff1a;传奇手游白日门【纵横天下】win服务端双端GM后台详细架设教程-海盗空间

JAXB的XmlValue注解

XmlValue注解用在Java属性、或者方法上。它可以使得映射到XML Schema中的Java类具有一个simpleContent 或者simpleType。 一个Java类中最多只能有一个属性被XmlValue注解。 如果被XmlValue注解的JavaBean属性是Java类中唯一映射到XML的成员&#xff0c;那么该Java类将会被映射…

2023年第十六届山东省职业院校技能大赛中职组“网络安全”赛项竞赛正式试题

第十六届山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题 目录 一、竞赛时间 二、竞赛阶段 三、竞赛任务书内容 &#xff08;一&#xff09;拓扑图 &#xff08;二&#xff09;A模块基础设施设置/安全加固&#xff08;200分&#xff09; &#xff08;三&#xf…

centos7搭建 PXE 服务安装 window10/11 系统

最近想搭建之前基于 window server 的 window 批量安装&#xff0c;但想想装 window server 真的太麻烦了&#xff0c;我只是为了 PXE 安装系统而已&#xff0c;这些装一个极度消耗资源的系统真是相当麻烦呀&#xff0c;之前装的 server 不维护的话&#xff0c;不是被挖矿盯上就…

入侵redis之准备---Centos7上面部署redis

入侵redis之准备—Centos7上面部署redis 编写这个部署redis&#xff0c;只是为了另一个文章入侵redis做准备&#xff0c;网上还有好多类似的文章&#xff0c;这个单纯的就是部署安装&#xff0c;并简单的测试使用以下 关联其他文章 [1]VMware上面安装部署centos7镜像系统【详细…

【Shell】Shell基础学习

一、shell脚本 (1)第一个shell脚本 #!/bin/bash #this is a comment echo "hello world"一个shell脚本永远以“#!”开头,这是一个脚本开始的标记,它是告诉系统执行这个文件需要用某个解释器,后面的/bin/bash就是指明解释器的具体位置。 “#”开头是注释 …