react-组件间的通讯

一、父传子

  • 父组件在使用子组件时,提供要传递的数据
  • 子组件通过props接收数据
class Parent extends React.Component {render() {return (<div><div>我是父组件</div><Child name="张" age={16} /></div>)}
}
const Child = props => {return (<div><div>我是子组件</div><div>从父组件接收来的数据: {props.name}-{props.age}</div></div>)
}

二、子传父

  • 父组件在使用子组件时,提供一个回调函数,用于接收数据
  • 子组件通过props调用回调函数,将要传递的数据作为参数传递给回调函数
class Parent extends React.Component {getChildMsg = (msg) => {console.log('从子组件接收来的数据:', msg)}render() {return (<div><div>我是父组件</div><Child getMsg={this.getChildMsg} /></div>)}
}
const Child = props => {handleClick = (msg) => {this.props.getMsg('123abc')}return (<div><div>我是子组件</div><button onClick={this.handleClick}>点我,给父组件传递数据</button></div>)
}

三、无关组件通讯

  • 调用 React.createContext() 创建 Provider 和 Consumer 两个组件
  • 使用Provider 组件作为父节点,设置value属性,表示要传递的数据
  • 调用Consumer 组件接受数据
import React from 'react'
const { Provider, Consumer } = React.createContext()class Parent extends React.Component {render() {return (<Provider value="red"><div>我是Parent <Child /></div></Provider>)}
}const Child = props => {return (<div>我是Child<Grandson /></div>)
}const Grandson= props => {return (<div>我是Grandson<Consumer>{data => 我是Parent接收来的数据: {data}}</Consumer></div>)
}export default Parent 

四、组件间的通讯demo

  • 代码
import React from 'react'
import './index.css'import PropTypes from 'prop-types'/*** 组件间的通信demo*/// 创建context得到提供和消费两个组件,方便无关组件之间的通信
// Provider设置value属性,表示要传递的数据
// Consumer接收数据
const { Provider, Consumer } = React.createContext()class Communication extends React.Component {render() {return (<Provider value="red"><div className="first">我是first<Node name="张" age={16} /></div></Provider>)}
}const Node = props => {return (<div className="second"><div>我是second-Node</div><div>父组件first接收来的数据: {props.name}-{props.age}</div><SubNodegetMsg={msg => {console.log('second-Node接收到子组件third-SubNode数据:', msg)}}/></div>)
}// Node组件 添加props校验
Node.propTypes = {name: PropTypes.string.isRequired, // string类型,必填age: PropTypes.number, // number类型
}// Node组件 添加props默认值
Node.defaultProps = {age: 18,
}const SubNode = props => {return (<div className="third"><div>我是third-SubNode</div><buttononClick={() => {props.getMsg('三儿')}}>点我给父组件second-Node传值</button><Child>我是子节点</Child></div>)
}const Child = props => {return (<div className="fourth"><div>我是fourth-Child</div><Consumer>{data => <span>我是first接收来的数据: {data}</span>}</Consumer><div>组件标签的子节点:{props.children}</div></div>)
}export default Communication
  • 效果

在这里插入图片描述

  • 输出

在这里插入图片描述

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

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

相关文章

NEWCC:新时代的区块链生态新币私募造势平台

在当今区块链领域&#xff0c;这项技术已经为金融资产注入了全新的生机&#xff0c;同时也为初创企业提供了新的商业模式和融资机会。通过代币的金融属性&#xff0c;企业和项目方得以实现资本的初期积累&#xff0c;同时在区块链空间以更低成本和更高效率进行交易和服务创新。…

【广州华锐互动】VR公司工厂消防逃生演练带来沉浸式的互动体验

在工业生产过程中&#xff0c;安全问题始终是我们不能忽视的重要环节。特别是火灾事故&#xff0c;不仅会造成重大的经济损失&#xff0c;更会威胁到员工的生命安全。传统的消防安全训练方法&#xff0c;如讲座、实地演练等&#xff0c;虽然具有一定的效果&#xff0c;但是无法…

ZooKeeper中节点的操作命令(查看、创建、删除节点)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

docker部署prometheus+grafana服务器监控(二) - 安装数据收集器 node-exporter

在目标服务器安装数据收集器 node-exporter 1. 安装数据收集器 node-exporter wget https://github.com/prometheus/node_exporter/releases/download/v1.6.1/node_exporter-1.6.1.linux-amd64.tar.gztar xvf node_exporter-1.6.1.linux-amd64.tar.gzmv node_exporter-1.6.1…

短视频矩阵系统搭建/源头----源码

一、智能剪辑、矩阵分发、无人直播、爆款文案于一体独立应用开发 抖去推----主要针对本地生活的----移动端(小程序软件系统&#xff0c;目前是全国源头独立开发)&#xff0c;开发功能大拆解分享&#xff0c;功能大拆解&#xff1a; 7大模型剪辑法&#xff08;数学阶乘&#xff…

SQL Server Management Studio (SSMS)的安装教程

文章目录 SQL Server Management Studio (SSMS)的安装教程从Microsoft官网下载SQL Server Management Studio安装程序。选中安装程序右键并选择“以管理员的身份运行”选项选择安装目录&#xff0c;单击“安装”按钮开始安装过程安装成功界面安装完成后&#xff0c;您可以启动S…

银河麒麟v10x86或者arm离线安装服务

银河麒麟v10x86或者arm离线安装服务 最近有个项目&#xff0c;甲方的服务器用的全是国产化服务器银河麒麟&#xff0c;架构是x86的然后也无法连接外网&#xff0c;需要离线安装服务正常思路就是找到离线安装的包&#xff0c;然后拷贝到现场的服务器中进行安装所以问题就在于如…

机器学习——正则化

正则化 在机器学习学习中往往不知道需要不知道选取的特征个数&#xff0c;假如特征个数选取过少&#xff0c;容易造成欠拟合&#xff0c;特征个数选取过多&#xff0c;则容易造成过拟合。由此为了保证模型能够很好的拟合样本&#xff0c;同时为了不要出现过拟合现象&#xff0…

Macos视频增强修复工具:Topaz Video AI for mac

Topaz Video AI是一款使用人工智能技术对视频进行增强和修复的软件。它可以自动降噪、去除锐化、减少压缩失真、提高清晰度等等。Topaz Video AI可以处理各种类型的视频&#xff0c;包括低分辨率视频、老旧影片、手机录制的视频等等。 使用Topaz Video AI非常简单&#xff0c;…

基于SSM的二手车交易系统

基于SSM的二手车交易系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 登录界面 管理员界面 摘要 基于SSM&#xff08;Spring、SpringMVC、MyBatis&a…

如何进行微服务测试?一文4个知识点带入门微服务测试!

关注留言点赞&#xff0c;带你了解最流行的软件开发知识与最新科技行业趋势。 本文将讨论微服务测试的重要性、挑战和最佳实践。 微服务架构是一种越来越流行的构建复杂分布式系统的方法。在此体系结构中&#xff0c;大型应用程序被分成较小的、独立的服务&#xff0c;这些服务…

大数据平台架构及规划

梳理了数据平台及未来规划&#xff0c;具体如下&#xff1a; 整体架构&#xff1a; 当前建设进展&#xff1a; 部署架构 部署架构2&#xff1a; Flink 实时计算平台架构 版本1&#xff1a; 版本2&#xff1a; 离线平台架构&#xff1a; 未来规划&#xff1a;

公有云容灾,中小企业最具性价比的选择

备份容灾的成本门槛 业务数据是企业的核心&#xff0c;为了防止意外灾难引发的数据损失、业务系统宕机等情况&#xff0c;企业可以选择部署备份容灾&#xff0c;以此保证系统和服务不会在意外发生时断线&#xff0c;以及数据的完整性。 在过去&#xff0c;只有大型企业会部署…

SourceTree 使用

如何拉取远程仓库&#xff1f;如何拉去远程分支&#xff1f;如何创建本地分支&#xff1f;如何删除本地分支&#xff1f;如何删除远端分支&#xff1f; 删除了远程分支&#xff0c;如果本地还有此分支&#xff0c;那么是可以通过推送本地分支来还原远端分支。如何合并本地分支&…

一个Entity Framework Core的性能优化案例

概要 本文提供一个EF Core的优化案例&#xff0c;主要介绍一些EF Core常用的优化方法&#xff0c;以及在优化过程中&#xff0c;出现性能反复的时候的解决方法&#xff0c;并澄清一些对优化概念的误解&#xff0c;例如AsNoTracking并不包治百病。 本文使用的是Dotnet 6.0和EF…

【网络协议】聊聊网络路由相关算法

如何配置路由 路由器是一台网络设备&#xff0c;多张网卡&#xff0c;当一个入口的网络包到达路由器时&#xff0c;会根据本地的信息库决定如何正确的转发流量&#xff0c;通常称为路由表 路由表主要包含如下 核心思想是根据目的 IP 地址来配置路由 目的网络&#xff1a;要去…

Babylonjs学习笔记(五)——创建PBR材质

书接上回&#xff0c;这里讨论PBR材质&#xff01;&#xff01;&#xff01; // 创建天空盒/* */const createSkyBox (scene:Scene):void>{const envTex CubeTexture.CreateFromPrefilteredData(./env/environment.env,scene)scene.environmentTexture envTex;scene.cre…

Games104现代游戏引擎笔记 网络游戏架构基础

挑战1:网络同步 挑战2:是网络的可靠性&#xff0c;包括应对网络的延迟&#xff0c;丢包和掉线 挑战3: 反作弊和安全系统&#xff0c;因为网络游戏的本质是经济系统 挑战4:多样性(不同设备&#xff0c;不同服务器)&#xff0c;在不停服的情况下热更新 挑战5:大量人数时对高并发…

【2.预备知识】

#pic_center R 1 R_1 R1​ R 2 R^2 R2 目录 知识框架No.1 数据预处理一、N维数组样例二、创建数组三、访问元素四、数据操作五、数据预处理六、D2L注意点 No.2 线性代数一、标量二、向量1、基本操作2、空间表示3、乘法 三、矩阵1、基本操作2、乘法3、空间表示4、乘法5、范数6、…

并发编程- 线程池ForkJoinPool工作原理分析(实践)

数据结构加油站&#xff1a; Comparison Sorting Visualization 并发设计模式 单线程归并排序 public class MergeSort {private final int[] arrayToSort; //要排序的数组private final int threshold; //拆分的阈值&#xff0c;低于此阈值就不再进行拆分public MergeSort…