React之组件间通信

React之组件间通信

组件通信: 简单讲就是组件之间的传值,包括state、函数等

1、父子组件通信

父组件给子组件传值

核心:1、自定义属性;2、props

  • 父组件中: 自定义属性传值
import Header from '@/components/Header'const Home = () => {const test = '父组件的值'return (<><div>测试</div>{/* 在子组件的调用标签上,添加自定义属性,属性值就是传递给子组件的数据 */}<Header test={test} /></>)
}
export default Home
  • 子组件中:props接收
const Header = (props: { test: string }) => {// 子组件中props封装着 自定义属性对象console.log(props)return (<><div>header</div></>)
}
export default Header

2、子父组件通信

子组件给父组件传值
核心:1、父组件传递子组件自定义方法;2、子组件调用父组件的自定义方法,并传自己子组件的数据

  • 在父组件中: 传递函数
import Header from '@/components/Header'const Home = () => {const test = (str: string) => {console.log(str)}return (<><div>测试</div>{/* 向子组件传递自定义函数 */}<Header test={test} /></>)
}
export default Home
  • 在子组件中: 接收父组件的函数,通过向父组件函数传参的方法方式,将数据传递给父组件
interface IProps {test: ReturnType<typeof Function> // test: Function
}
const Header = (props: IProps) => {// 子组件中props封装着 自定义属性对象const str = '子组件的值'props.test(str)return (<><div>header</div></>)
}export default Header

3、非父子组件传值

兄弟组件或者其他非父子组件的传值。在Vue中使用的是自定义事件 definEmits()。但是React没有内置的自定义事件方法。需要借助第三方自定义事件,例如eventseventemitter3eventemitter2

  • 安装第三方包
$ yarn add events

ts 还需要安装

$ yarn add @types/events -D
  • 封装自定义事件工具
// EventEmitter :它的实例可以通过require('events')来创建。
import EventEmitter from 'events'const emits = new EventEmitter()
export default emits
  • 在传值的组件中,注册自定义事件
import emits from '@/utils/events'
import { useEffect } from 'react'
const Header = () => {// 注册自定义事件test// 注册自定义事件需要在useEffect中完成useEffect(() => {// 参数1: 自定义事件名// 参数2: 通信传递的值emits.emit('test', 'header 组件的值')}, [])return (<><div>header</div></>)
}export default Header
  • 在接收值的组件中,监听自定义事件
import emits from '@/utils/events'
const Footer = () => {emits.on('test', (str: string) => {console.log(str)})return (<><div>footer</div></>)
}
export default Footer

4、其他非父子组件之间的通信补充

4.1、全局状态管理:Redux全家桶

redux数据持久化
redux异步操作

4.2、React内置的上下文对象:context

  • 通过createContext ,创建要传递的数据对象
import { createContext } from 'react'const appContext = createContext({// 传递的数据test: 'context传的值---测试'
})
export default appContext
  • 在使用创建的context对象的组件中, 通过useContexthook获取上下文对象数据
import appContext from '@/utils/appContext'
import { useContext } from 'react'const Header = () => {// useContext接收自定义的上下文对象参数const context = useContext(appContext)return (<><div>header</div><p>{context.test}</p></>)
}
export default Header

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

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

相关文章

关于Anaconda环境配置的一些问题

文章目录 一、关于package文件安装位置二、关于尝试下载Python包时出现的CondaSSLError三、配置环境的整个流程 一、关于package文件安装位置 package 文件安装在envs目录底下的Lib中&#xff0c;可以参考一下。 在对应的Python脚本文件中&#xff0c;选择Parameters&#xff0…

【Spring】Spring 总览

一、简单介绍一下 Spring Spring是一个全面的、企业应用开发的一站式解决方案&#xff0c;贯穿表现层、业务层、持久层&#xff0c;可以轻松和其他框架整合&#xff0c;具有轻量级、控制反转、面向切面、容器等特征。 轻量级 &#xff1a; 空间开销和时间开销都很轻量 控制反…

蓝桥杯单片机第十二届国赛 真题+代码

iic.c /* # I2C代码片段说明1. 本文件夹中提供的驱动代码供参赛选手完成程序设计参考。2. 参赛选手可以自行编写相关代码或以该代码为基础&#xff0c;根据所选单片机类型、运行速度和试题中对单片机时钟频率的要求&#xff0c;进行代码调试和修改。 */ #include <STC1…

antd vue tree的增删改和拖拽

最近项目中遇到一个tree型数据的的操作的功能&#xff0c;代码简单如下&#xff1a; <a-treeshowLineshowIcon:draggable"draggable":expandedKeys"expandedKeys":treeData"treeData"drop"onDrag"expand"onExpand">&l…

java springBoot 整合日志

1.在Spring Boot项目的resources目录下创建一个新的logback.xml文件。 2.logback.xml中&#xff0c;配置 代码 <?xml version"1.0" encoding"UTF-8"?> <!-- 日志级别从低到高分为TRACE < DEBUG < INFO < WARN < ERROR < FATAL…

了解Unity编辑器之组件篇Physics 2D(十二)

一、Area Effector 2D区域施加力&#xff09;&#xff1a;用于控制区域施加力的行为 Use Collider Mask&#xff08;使用碰撞器遮罩&#xff09;&#xff1a;启用后&#xff0c;区域施加力仅会作用于特定的碰撞器。可以使用Collider Mask属性选择要作用的碰撞器。 Collider Ma…

vmware中windows操作系统虚拟机安装

1.win10中安装 1.1 虚拟机向导 文件-新建虚拟机 典型-下一步 稍后安装操作系统-下一步 window10 64x -下一步 修改虚拟机名称及位置-下一步 默认60g,至少大于40g-将虚拟磁盘拆分成多个文件夹-下一步 点击完成 1.2 编辑虚拟机设置 移除打印机 设置虚拟机&#xff0c;加入iso映…

【隐式动态求解】使用非线性纽马克方法的隐式动态求解研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

关联规则独热编码

文章目录 关联规则引言相关名词 独热编码引言代码第一种第二种 关联规则 引言 在一家超市里&#xff0c;有一个有趣的现象&#xff1a;尿布和啤酒竟然摆在一起出售。但是这个奇怪的举措却使尿布和啤酒的销量双双增加了。 一个意外的发现是&#xff1a;”跟尿布一起购买最多的…

数据库选型

影响数据库选择的因素 数据量&#xff1a;是否海量数据&#xff0c;单表数据量太大会考验数据库的性能数据结构&#xff1a;结构化 (每条记录的结构都一样) 还是非结构化的 (不同记录的结构可以不一样)是否宽表&#xff1a;一条记录是 10 个域&#xff0c;还是成百上千个域数据…

小程序 获取用户头像、昵称、手机号的组件封装(最新版)

在父组件引入该组件 <!-- 授权信息 --><auth-mes showModal"{{showModal}}" idautnMes bind:onConfirm"onConfirm"></auth-mes> 子组件详细代码为: authMes.wxml <!-- components/authMes/authMes.wxml --> <van-popup show…

CompletableFuture生产中使用问题

CompletableFuture生产中使用问题 1 背景2 测试3 原因4. 总结 1 背景 接到一个任务,需要优化下单接口,查看完业务逻辑后发现有一些可以并行或异步查询的地方,于是采用CompletableFuture来做异步优化,提高接口响应速度,伪代码如下 //查询用户信息CompletableFuture<JSONObj…

安全测试国家标准解读——数据库管理和文件管理

下面的系列文章主要围绕《GB/T 38674—2020 信息安全技术 应用软件安全编程指南》进行讲解&#xff0c;该标准是2020年4月28日&#xff0c;由国家市场监督管理总局、国家标准化管理委员会发布&#xff0c;2020年11月01日开始实施。我们对该标准中一些常见的漏洞进行了梳理&…

Commands Of Hadoop

序言 持续整理下常用的命令cuiyaonan2000163.com Command 文件拷贝 当从多个源拷贝时&#xff0c;如果两个源冲突&#xff0c;distcp会停止拷贝并提示出错信息&#xff0c;. 如果在目的位置发生冲突&#xff0c;会根据选项设置解决。 默认情况会跳过已经存在的目标文件&am…

Ansible

目录 ansible 环境安装部署 管理端安装 ansible ansible 目录结构 配置主机清单 配置密钥对验证 ansible 命令行模块 1&#xff0e;command 模块 2&#xff0e;shell 模块 3&#xff0e;cron 模块 4&#xff0e;user 模块 5&#xff0e;group 模块 6&#xff0e;co…

环境搭建-Ubuntu20.04.6系统TensorFlow BenchMark的GPU测试

1. 下载Ubuntu20.04.6镜像 登录阿里云官方镜像站&#xff1a;阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 2. 测试环境 Server OS&#xff1a;Ubuntu 20.04.6 LTS Kernel: Linux 5.4.0-155-generic x86-64 Docker Version&#xff1a;24.0.5, build ced0996 docker-com…

Django框架:使用channels实现websocket,配置和项目实际使用

一、基本配置 依赖包&#xff1a; Django3.2 django-cors-headers3.5.0 redis4.6.0 #操作redis数据库的 channels3.0.0 #websocket channels-redis4.1.0 #通道层需要&#xff0c;依赖redis包项目目录结构&#xff1a; study_websocket --study_websocket --__init__.py --s…

3dsmax制作一个机器人

文章目录 建模身子&#xff1a;眼睛&#xff1a;头饰&#xff1a;肩膀手臂腿调整细节 渲染导出objMarmoset Toolbag 3.08渲染给眼睛添加材质&#xff0c;设置为自发光添加背景灯光 建模 身子&#xff1a; 眼睛&#xff1a; 头饰&#xff1a; 肩膀 手臂 腿 调整细节 渲染 导出…

Android性能优化之游戏引擎初始化ANR

近期&#xff0c;着手对bugly上的anr 处理&#xff0c;记录下优化的方向。 借用网上的一张图&#xff1a; 这里的anr 问题是属于主线程的call 耗时操作。需要使用trace 来获取发生anr前一些列的耗时方法调用时间&#xff0c;再次梳理业务&#xff0c;才可能解决。 问题1 ja…

【Linux进程】进程控制(下) {进程程序替换:程序替换的工作原理,程序替换函数exec*,简单的命令行解释器}

四、进程程序替换 之前用fork创建子进程后&#xff0c;父子进程执行同一个程序的不同代码段。 如何使子进程执行另一个不同的程序呢&#xff1f;子进程需要进行程序替换&#xff01; 程序替换&#xff0c;就是通过特定的接口&#xff0c;将磁盘上一个全新的程序&#xff08;包…