4.组件通讯

news2024/11/24 0:35:16

默认情况下组件只能使用自己的状态,但当组件拆分的比较小的时候,就不可避免的使用到其他组件的状态,比如之前做的例子,当我们的发表评论区域与显示评论区域拆分为两个组件时,这两个组件之间一定要进行通讯以达成某些功能

目录

1  props

1.1  函数组件

1.2  类组件

1.3  传递非字符串数据

1.4  构造函数中要传入props才能在构造函数中使用props

1.5  children属性

1.6  props校验

1.6.1  安装 prop-types

1.6.2  使用 prop-types

1.7  props默认值

2  通讯情况

2.1  父组件传递数据给子组件

2.2  子组件传递数据给父组件

2.3  兄弟组件相互通讯

3  多级传递

3.1  props多级传递的问题

3.2  Context

3.2.1  创建提供者与消费者

3.2.2  提供数据

3.2.3  使用数据


 

1  props

props是properties的缩写,接收外部数据的,函数组件与类组件使用props的方式略有不同

props是只读属性,只能获取,无法修改

props只能进行父子传递,无法进行爷孙传递

1.1  函数组件

函数组件需要把props作为参数传递进去,props是形参,我们

1.2  类组件

类组件用this调用

1.3  传递非字符串数据

可以通过props给组件传递任意类型的数据,如果直接给是会报错的

给引号传进去的都是字符串类型,通过行内给属性的时候需要给一个大括号

这样就会得到非字符串类型的数据

在大括中也可以给其他类型的数据

变量可以获取,函数可以使用,JSX可以渲染

1.4  构造函数中要传入props才能在构造函数中使用props

直接拿拿不到

  • 如果不拿就不会报错,不会报错可以渲染出来下面的render()

传入props后就可以拿到了,获取的时候用不用this都能获取到

1.5  children属性

当一个组件标签中有子节点的时候,props会自动多一个children属性,如果没有子节点就没有children这个属性

当组件标签有子节点的时候,有children这个属性了,但子节点默认不会渲染到页面上

可以在返回值中加入children进行渲染

children内的值可以是任何类型的值,比如文本、React元素、组件、函数、JSX这些都可以。 在这里有讲children的其他类型值的用法,都是大同小异,有需要可以简单看一下 54-props深入(1children属性)_哔哩哔哩_bilibili

1.6  props校验

如果传入的参数与组件要求的参数类型不同就会报错,且如果不了解组件就不知道问题出在哪,所以在接收数据的时候最好对props进行类型校验

我们举个例子,下面的colors需要一个数组,但我传入了一个字符

这样就会在组件内部报错,组件内部报这种错误,如果组件不是自己写的,是很难解决的

1.6.1  安装 prop-types

你可以用 原生JS中的typeof进行校验,也可以用第三方的包 prop-types 进行校验

下载之后引用一下

1.6.2  使用 prop-types

.proTypes是固定的,prop_types是导入的库

这样就可以看到明确的提示了,提示的意思是 给的是 string,期望得到 array

把传入的参数搞成数组就可以正常使用了

常见的校验类型还有 array,bool,func,number.object,string,element(React元素)

上面说的都是比较常用的校验规则,如果要看所有的校验规则可以看一下文档 Typechecking With PropTypes – React

1.7  props默认值

我们可以给用组件的人提供默认值,这样用的时候就不用刻意输入值了(如果手动给会覆盖掉默认值)

2  通讯情况

有三种

  • 父组件 -> 子组件
  • 子组件 -> 父组件
  • 兄弟组件之前通讯

2.1  父组件传递数据给子组件

  • 渲染的时候是要渲染父组件的,渲染父组件才能让父子组件都出现在页面上
  • 给类名是方便看组件的父子关系,在例子中没有任何功能

2.2  子组件传递数据给父组件

  1. 在父组件中创建一个函数A,这个函数A是处理子组件传递过来的信息的,例子中将信息存在了state,存在state后就可以在父组件的任意地方调用了
  2. 之后把函数A作为属性给子元素
  3. 在子元素中定义要传递的信息
  4. 将信息作为参数给函数A
  5. 调用函数A,我当前是用点击事件触发

打开后是这样的

点击一下按钮

2.3  兄弟组件相互通讯

兄弟组件相互通讯需要将两个组件都放在一个父组件中,然后将两个兄弟组件的状态提升到最近的公共父组件中,由公共父组件管理状态以及提供操作共享状态的方法

兄弟组件将状态交给父组件管理叫状态提升

兄弟组件的通讯相当于先 由子到父 再 由父到子

我们做个计数器的例子

点击后可以正常+1

上面的count是 Show 组件,下面的按钮是Btn组件,信号传递的过程是 Btn -> 公共父对象 -> Show

Btn组件只进行调用父组件的方式,不对数据进行直接处理

3  多级传递

3.1  props多级传递的问题

props只能在父子间传递,无法在爷孙间进行传递

如果要爷孙间进行通讯使用props只能再给一次

当层级多的时候,这个搞就会很繁琐,我们使用Context可以让传递不这样繁琐

3.2  Context

3.2.1  创建提供者与消费者

首先通过createContext()方法创建 提供者(Provider) 与 消费者(Consumer) ,提供者与消费者的本质是组件,名称可以自定义

3.2.2  提供数据

一般来讲我们会用Provider包裹最高级别的控件的全部内容,然后给Provider一个value,value属性的名称是固定的,一般会给一个对象,也可以给字符串,整型这些其他数据类型的变量

3.2.3  使用数据

这个你就这么用就行了,用大括号调用

使用的时候Consumer不一定在最上层,可以让Consumer外面多一些标签

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

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

相关文章

π122M30代替Si8621AB-B-IS 低功耗,高能效、抗干扰能力好的 双通道数字隔离器解决方案

π122M30代替Si8621AB-B-IS 低功耗,高能效、抗干扰能力好的解决方案电路简单、稳定性更高 ,具有出色的性能特征和可靠性,整体性能优于光耦和基于其他原理的数字隔离器产品。 产品传输通道间彼此独立,可实现多种传输方向的配置&…

Day11 C++STL入门基础知识八——stack、queue容器 基本概念-常用接口 【全面深度剖析+例题代码展示】

💃🏼 本人简介:男 👶🏼 年龄:18 🚩 今日留言:亮亮被迫去练科目二啦,定时发布的文章,回来统一给大家三连回复嗷~😉 文章目录1. stack容器——栈1.…

CSDN常见问题汇总

1.怎么申请退款? 通过CSDN平台购买的“VIP会员、余额”,在刚购买后未使用的情况可支持退款; “付费资源、付费专栏、盲盒、魔盒、课程、C认证”等虚拟商品一经购买后,除了特殊原因外,概不支持退款; 特殊原…

美团8年测试经验,一文手把手教你抒写接口测试框架集成测试报告

在接口自动化测试完成后,通常我们都需要一个测试报告来进行结果展示,而测试报告的美观程度直接决定了你在同事和领导眼中的技术形象,本文将介绍rest-assured接口测试框架集成ExtentReports测试报告,让你的框架更加完美。 ExtentR…

【大唐杯备考】——5G网元功能与接口(学习笔记)

📖 前言:本期介绍5G网元功能与接口。 目录🕒 1. 5G移动通信系统整体网络架构🕘 1.1 5G核心网架构🕘 1.2 5G接入网架构🕒 2. 5G主要网元功能🕘 2.1 UPF(用户面功能)&#…

使用code-server为Docker容器搭建在线开发环境

Code-server是一个基于服务端的开源VSCode。只要服务器端配置好code-server,就可以在任何浏览器上使用VScode访问服务器的代码进行编程。(GitHub地址:https://github.com/cdr/code-server) Docker是一个开源的Linux容器引擎。我们…

DeepLabV3+:搭建Mobilenetv2网络

目录 Mobilenetv2的介绍 Mobilenetv2的结构 Inverted Residual Block倒残差结构 Pytorch实现Inverted Residual Block 搭建Mobilenetv2 Pytorch实现Mobilenetv2主干网络 相关参考资料 Mobilenetv2的介绍 Mobilenetv2网络设计基于Mobilenetv1,它保持了其简单…

【进击的算法】动态规划——01背包

🍿本文主题:动态规划 01背包 背包问题 C/C 算法 🎈更多算法:基础回溯算法 基础动态规划 💕我的主页:蓝色学者的主页 文章目录一、前言二、概念✔️动态规划概念✔️01背包的概念三、问题描述与讲解&#x1…

spring 中 mybaits 的一级缓存失效

mybatis 的一级缓存 简单回顾下mybatis的一级缓存 本质上是一个基于map实现的内存级别的缓存,默认开启,生命周期是 sqlsession 级别的 为什么会失效 其实这个问题反向分析一下就会有思路了,一级缓存默认是sqlsession级别的,这个规…

2022年rust杂记

以下记录的是,我在学习中的一些学习笔记,这篇笔记是自己学习的学习大杂烩,主要用于记录,方便查找1、相关学习链接https://www.rust-lang.org/zh-CN/governance/ RUST 官网博客https://kaisery.github.io/trpl-zh-cn/(最…

应用性能监控对DMS系统综合分析案例

背景 DMS系统是某汽车集团的经销商在线系统,是汽车集团的重要业务系统。本次分析重点针对DMS系统性能进行分析,以供安全取证、性能分析、网络质量监测以及深层网络分析。 该汽车总部已部署NetInside流量分析系统,使用流量分析系统提供实时和…

好好的系统,为什么要分库分表?

不急于上手实战 ShardingSphere 框架,先来复习下分库分表的基础概念,技术名词大多晦涩难懂,不要死记硬背理解最重要,当你捅破那层窗户纸,发现其实它也就那么回事。 什么是分库分表 分库分表是在海量数据下&#xff0…

51单片机学习笔记-14 ADDA

14 ADDA [toc] 注:笔记主要参考B站江科大自化协教学视频“51单片机入门教程-2020版 程序全程纯手打 从零开始入门”。 注:工程及代码文件放在了本人的Github仓库。 14.1 AD/DA简介 14.1.1 AD/DA基本介绍 AD(Analog to Digital)…

FreeRTOS任务管理

RTOS 的核心是如果高效管理各个任务及任务之间通信,本章将向大家介绍 FreeRTOS 的任务管理,通过本章的学习,让大家对 RTOS 任务的理解更加深入, 为后面的学习做好铺垫。本章分为如下几部分内容: 1 任务管理介绍 2 常用…

ue4c++日记7(动画蓝图)

FVector Speed Pawn->GetVelocity();//获取方向向量FVector xyspeed FVector(Speed.X, Speed.Y,0);//不要z方向MovementSpeed xyspeed.Size();//xy取长//角色是否处于下落状态IsJumping Pawn->GetMovementComponent()->IsFalling();//#include "GameFramewor…

FreeRTOS中的信号量实验

信号量是操作系统中重要的一部分,信号量一般用来进行资源管理和任务同 步,FreeRTOS 中信号量又分为二值信号量、计数型信号量、互斥信号量和递归 互斥信号量。不同的信号量其应用场景不同,但有些应用场景是可以互换着使用。 本章要实现的功能…

【数据结构从0到1之树的初识】

目录 1.树的表达方式 1.1 树的定义 1.2树的相关概念 1.3树的存储结构 1.3.1 双亲表示法 1.3.2 孩子表示法 1.3.3 孩子兄弟表示法 1.4树在实际中的应用 后记: 🕺作者: 迷茫的启明星 😘欢迎关注:👍点…

Lua 迭代器

Lua 迭代器 参考文章: 菜鸟教程。 https://cloud.tencent.com/developer/article/2203215 迭代器(iterator)是一种对象,它能够用来遍历标准模板库容器中的部分或全部元素,每个迭代器对象代表容器中的确定的地址。 在 L…

23种设计模式之七种结构型模式

23种设计模式之七种结构型模式1. 设计模式概述1.1 什么是设计模式1.2 设计模式的好处2. 设计原则分类3. 详解3.1 单一职责原则3.2 开闭原则3.3 里氏代换原则3.4 依赖倒转原则3.5 接口隔离原则3.6 合成复用原则3.7 迪米特法则4. Awakening1. 设计模式概述 我们的软件开发技术也包…

[Python从零到壹] 番外篇之可视化利用D3库实现CSDN博客每日统计效果(类似github)

欢迎大家来到“Python从零到壹”,在这里我将分享约200篇Python系列文章,带大家一起去学习和玩耍,看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解,真心想把自己近十年的编程经验分享给大家,希望…