react中组件间的通信

一、父传子

1.代码展示

import React, { useState } from 'react';function SonPage(props){ // 子组件const {msg} = propsreturn (<div>我是子组件 {msg}</div>)
}function App() { // 父组件const [msgText,setMsgText] = useState('父传子')return (<div className="App"><div>我是父组件</div><SonPage msg={msgText} /></div>);
}export default App;

2.代码说明

1.子组件名称命名采用大驼峰命名法;

2.<SonPage msg={msgText} />中的msg属性用来在子组件中获取父组件传递过来msgText,msgText是父组件传递过来的数据

3.在子组件中组件函数名中有个参数SonPage(props),所有父组件传递过来的数据都在该参数中

3.效果展示

二、子传父

1.代码展示

import React, { useState } from 'react';function SonPage(props){ // 子组件const {msg} = props // 解构:可以解构出传递过来的数据和方法const sonMsg = '子传父'return (<div>我是子组件 {msg}<button onClick={()=>props.getSonMsg(sonMsg)}>点击发送消息到父组件</button></div>)
}function App() { // 父组件const [msgText,setMsgText] = useState('父传子')const [sonMsgText,setSonMsgText] = useState('')function getSonMsg(sonMsg){setSonMsgText(sonMsg)}return (<div className="App"><div>我是父组件 {sonMsgText}</div><SonPage msg={msgText} getSonMsg={getSonMsg}/></div>);
}export default App;

2.代码说明

1.子传父就相当于父传子,只不过父传子传递的是数据,而子传父传递的是方法;

2.<SonPage msg={msgText} getSonMsg={getSonMsg}/>,同样需要在子组件标签上定义一个属性(getSonMsg)用于子组件中获取父组件传递过来的方法(getSonMsg),命名上一般要求以on开头代表传递方法,我这里没用on开头是便于理解;

3.在子组件中组件函数名中有个参数SonPage(props),所有父组件传递过来的数据和方法都在该参数中,所以可以通过props.getSonMsg()来触发到父组件中的方法(getSonMsg);

4.该方法就是用来获取子组件传递过来的参数,有个参数就是子组件传递过来的数据

(getSonMsg(sonMsg))

3.效果展示

三、兄弟之间数据通信

1.代码展示

import React, { useState } from 'react';function AItem(props){const { onGetDataA } = props;const [msgA] = useState('组件A的数据')return (<div>我是子组件A <button onClick={()=>onGetDataA(msgA)}>点击发送数据</button></div>)
}
function BItem(props){const { getMsgAText } = props;return (<div>我是子组件B {getMsgAText}</div>)
}function App() { // 父组件const [msgAText,setMsgAText] = useState()function getDataA(msgAText){setMsgAText(msgAText)console.log('msgAText',msgAText);}return (<div className="App"><div>我是父组件</div><AItem onGetDataA={getDataA}/><BItem getMsgAText={msgAText}/></div>);
}export default App;

2.代码说明

兄弟间的通信其实就是同时使用父传子和子传父;先是子传父,将A组件的数据传递给父组件,再是在父组件中将A组件传递过来的数据通过父传子传递给B组件

3.效果展示

四、隔代间的数据通信

1.代码展示

import React, { useState, useContext, createContext } from 'react';const MsgContext = createContext()function AItem() {return (<div><div>我是子组件A</div><BItem /></div>)
}
function BItem() {const fatherMsg = useContext(MsgContext)return (<div>我是孙子组件B {fatherMsg}</div>)
}function App() { // 父组件const fatherMsg = '父组件的数据'return (<div className="App"><MsgContext.Provider value={fatherMsg}><div>我是父组件</div><AItem /></MsgContext.Provider></div>);
}export default App;

2.代码说明

1.首先需要通过createContext创建上下文标签(MsgContext),命名需要采用大驼峰命名法;

2.需要在顶层组件中使用MsgContext.Provider标签,将子标签包裹起来;

3.在需要获取顶层组件数据的后代组件中使用useContext(MsgContext)钩子函数来获取;

4.隔代间的数据通信并不是说爷孙之间,而是有上下关系的组件,也就是不管隔了多少代,比如父子之间也是可以使用的;

5.所谓的顶层组件就是需要传递数据给后代组件的组件;

6.<MsgContext.Provider value={fatherMsg}>,除了fatherMsg是变量外都是固定写法,value属性是用于传递数据的属性

3.效果展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/383576.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全国区块链职业技能大赛第八套区块链产品需求分析与方案设计

任务1-1:区块链产品需求分析与方案设计 医疗健康平台中涉及到医院、医生、患者等参与方,他们需要在区块链医疗健康平台中完成账户注册、身份上链、挂号就诊、查询病例等多种业务活动。通过对业务活动的功能分析,可以更好的服务系统的开发流程。基于医疗健康平台系统架构,以…

Vue3可媲美Element Plus Tree组件开发之append节点

在前面的章节&#xff0c;我们完成了可媲美Element Plus Tree组件的基本开发。通过实现各种计算属性&#xff0c;tree数据状态变化引起的视图更新被计算属性所接管了&#xff0c;无需我们再手动做各种遍历、查找以及手动监听操作&#xff0c;这样后续开发高级功能变得易如反掌啦…

kafka架构+原理+源码

1.安装jdk17 sudo yum -y update sudo wget https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.rpm sudo yum -y install ./jdk-17_linux-x64_bin.rpm、 sudo java -version 2.安装kafka How to easily install kafka without zookeeper | Aditya’s Blog …

好用的资产管理系统 国内5款资产管理系统排名

选择合适的固定资产管理系统对于企业的资产跟踪和维护至关重要。市场上有许多优秀的资产管理系统&#xff0c;每款系统都有其独特的功能和优势。本文将盘点5个好用的固定资产管理系统排名不分先后&#xff0c;帮助您了解它们的主要特点和适用场景&#xff0c;从而选择最适合您企…

【Java 数据结构】ArrayList类介绍

ArrayList类介绍 初识List接口ArrayList类ArrayList类是什么顺序表的模拟实现初始化增加元素删除元素查找元素修改元素 ArrayList类使用构造方法ArrayList源码阅读常用方法及其注意事项 初识List接口 List 是集合框架中的一个接口, 它的里面包含了一些方法, 例如add(), remove…

JAVA项目样本

学生管理系统SISM-v2.0 项目构建 ebtity 学生类:属性,setter,getter,toString(),构造器… dao层 数据交互,数组CRUD(增删改查) 接口 实现

《Techporters架构搭建》-Day03 功能权限设计

功能权限设计 引言权限介绍什么是权限权限的作用 RBAC概述RBAC的组成RBAC支持的安全原则RBAC模型 基于RBAC的权限设计用户管理角色管理菜单管理部门管理岗位管理 权限系统设计ER图标准RBAC模型表复杂RBAC模型表 多租户架构什么是多租户&#xff1f;多租户特点多租户模型竖井隔离…

汽车免拆诊断案例 | 2014 款上汽名爵 GT 车发动机无法起动

故障现象 一辆2014款上汽名爵GT车&#xff0c;搭载15S4G发动机&#xff0c;累计行驶里程约为18.4万km。该车因左前部发生碰撞事故进厂维修&#xff0c;更换损坏的部件后起动发动机&#xff0c;起动机运转有力&#xff0c;但无着机迹象。用故障检测仪检测&#xff0c;发现无法与…

(leetcode学习)236. 二叉树的最近公共祖先

给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff0c;最近公共祖先表示为一个节点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是它自己的祖…

【BUG】已解决:TypeError: the JSON object must be str, bytes or bytearray, not dict

已解决&#xff1a;TypeError: the JSON object must be str, bytes or bytearray, not dict 目录 已解决&#xff1a;TypeError: the JSON object must be str, bytes or bytearray, not dict 【常见模块错误】 错误原因&#xff1a; 解决方案&#xff1a; 欢迎来到英杰社区…

2024最新手机软件APP下载排行网站源码 软件下载站PHP源码

源码介绍 这是一款简洁蓝色的手机软件下载应用排行、平台和最新发布网站源码&#xff0c;主要包括主页、APP列表页、APP详情介绍页、新闻资讯列表、新闻详情页、关于我们等模块页面。 软件下载站PHP网站源码&#xff0c;简单的部署上线&#xff0c;访问首页安装程序&#xff…

探索PyMuPDF:Python中的强大PDF处理库

探索PyMuPDF&#xff1a;Python中的强大PDF处理库 背景&#xff1a;为何选择PyMuPDF 在数字化时代&#xff0c;PDF文件因其跨平台的兼容性和对格式的严格保持而成为文档交换的通用格式。然而&#xff0c;处理PDF文件往往需要专门的工具或库。这就是PyMuPDF库的用武之地。PyMuP…

飞书群聊机器人自定义机器人接入,并实现艾特@群成员功能

飞书群聊机器人还是比钉钉的要麻烦一点&#xff0c;钉钉的直接通过手机号就可以艾特群里面的人&#xff0c;但是飞书的要想艾特群里面的人&#xff0c;需要使用用户的 Open ID 或 User ID。这两个ID怎么获取呢&#xff1f;还需要在飞书的开放平台上创建一个应用&#xff0c;然后…

【MySQL是怎样运行的 | 第二篇】MySQL三大日志文件

文章目录 2.MySQL三大日志文件2.1日志文件列表2.1.1 redo log2.1.2 bin log2.1.3 undo log 2.2redo log日志详讲2.3 binglog和redo log有什么区别&#xff1f;2.4一条更新语句的执行过程 2.MySQL三大日志文件 2.1日志文件列表 redo log&#xff1a;重做日志&#xff0c;记录了…

mysql面试(五)

前言 本章节从数据页的具体结构&#xff0c;分析到如何生成索引&#xff0c;如何构成B树的索引结构。 以及什么是聚簇索引&#xff0c;什么是联合索引 InnoDB数据结构 行数据 我看各种文档中有好多记录数据结构的&#xff0c;但是这些都是看完就忘的东西。在这里详细讲也没…

深度学习复盘与论文复现E

文章目录 一、项目复现的问题及其解决方案1、 Cannot find DGL C graphbolt library2、 “is“ with a literal. Did you mean ““?”3、运行SEG、SPG查看GATNet的网络结构4、关于LI-FPN项目找不到数据粒度不匹配问题5、关于LI-FPN项目num_samples为空6、解决路径问题7、 !ss…

Fork软件笔记:一键拉取仓库所有模块

Fork是一个好用的git工具&#xff0c;只是没有中文而已&#xff08;不过不用翻译也能看使用&#xff09;。 工具下载地址&#xff1a;https://fork.dev/ 界面展示&#xff1a; 当项目中仓库模块比较多时&#xff0c;可以看到每个模块都是一个分页&#xff0c;每一个都要手动切换…

Git 分布式版本控制系统、创建分支,跳转分支、git拉取、在码云上创建项目,进行pull 和 push、克隆码云上任意项目

目录 1.Git 分布式版本控制系统&#xff1a; 1.安装git 2.创建目录&#xff0c;进行初始化 3.写入Java文件&#xff0c;提交文件 4.文件放入仓库 2.创建分支&#xff0c;跳转分支&#xff08;所有的git操作都应该工作在&#xff0c;指定的init 目录下进行&#xff09; 1.…

【前端学习笔记】CSS基础一

一、什么是CSS 1.CSS 介绍 CSS&#xff08;Cascading Style Sheets&#xff0c;层叠样式表&#xff09;是一种用来控制网页布局和设计外观的样式语言。它使得开发者可以分离网页的内容&#xff08;HTML&#xff09;和表现形式&#xff08;样式&#xff09;&#xff0c;提高了…

微信小程序:vant-weapp 组件库、css 变量

vant-weapp 组件库 前往 vant-weapp 官网 npm 使用限制&#xff1a;不支持依赖于 Node.js 内置库、浏览器内置对象、C 插件 的包。 安装 vant-weapp # 通过 npm 安装 npm i vant/weapp -S --production# 通过 yarn 安装 yarn add vant/weapp --production# 安装 0.x 版本 npm i…