当前位置：首页 > news >正文

REACT--组件通信

news 来源：原创 2025/9/17 21:46:40

组件之间如何进行通信？

组件通信

组件的通信主要借助props传递值

分为整体接收、解构接收

整体接收

import PropTypes from 'prop-types';//子组件
function Welcome(props){return (<div>hello Welcome,{props.count},{props.msg}</div>)
}// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {// 验证 count 属性为字符串类型count: PropTypes.string,// 验证 msg 属性为字符串类型msg: PropTypes.string
};// 父组件
function App(){return (<div>hello App<Welcome count="123" msg="hi react"/></div>)
}export default App

解构接收

import PropTypes from 'prop-types';//子组件
function Welcome({count,msg}){return (<div>hello Welcome,{count},{msg}</div>)
}// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {// 验证 count 属性为字符串类型count: PropTypes.string,// 验证 msg 属性为字符串类型msg: PropTypes.string
};// 父组件
function App(){return (<div>hello App<Welcome count="123" msg="hi react"/></div>)
}export default App

传递属性但是不传值，实际传的是true

点击事件：

import PropTypes from 'prop-types';//子组件
function Welcome({onClick,getData}){getData('我是子组件的数据')return (<div onClick={onClick}>hello Welcome</div>)
}// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {// 验证 onClick 属性为函数类型onClick: PropTypes.func.isRequired,// 验证 getData 属性为函数类型getData: PropTypes.func.isRequired
};// 父组件
function App(){const handleClick =()=>{console.log(1234)}const getData = (data)=>{console.log(data)}return (<div>hello App<Welcome onClick={handleClick} getData={getData}/></div>)
}export default App

组件内容如何组合到一起

主要是通过props的children属性，传递多组内容只要是大括号可以接收的都可以进行传递，比如样式

通信的数据如何添加默认值和限定类型

通信数据添加默认值：

import PropTypes from 'prop-types';function Welcome({count,msg}){return (<div>hello Welcome,{count},{msg}</div>)
}// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {// 验证 count 属性为数字类型count: PropTypes.number,// 验证 msg 属性为字符串类型msg: PropTypes.string
};// 为 Welcome 组件的属性设置默认值
Welcome.defaultProps = {count: 0,msg: 'default content'
};function App(){return (<div>hello App<Welcome count={123} msg="hello react"/><Welcome count={123}/></div>)
}export default App

这样也可以：

import PropTypes from 'prop-types';function Welcome({count=0,msg='default'}){return (<div>hello Welcome,{count},{msg}</div>)
}// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {// 验证 count 属性为数字类型count: PropTypes.number,// 验证 msg 属性为字符串类型msg: PropTypes.string
};function App(){return (<div>hello App<Welcome count={123} msg="hello react"/><Welcome count={123}/></div>)
}export default App

怎么限定类型捏？

很简单，就是使用Protypes

我的版本高格式检测严格都不允许不添加这个勒：

// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {// 验证 count 属性为数字类型count: PropTypes.number,// 验证 msg 属性为字符串类型msg: PropTypes.string
};

不添加这个则会强制的报错

想要限定多种类型的话可以这样做：

import PropTypes from 'prop-types';function Welcome({count=0,msg='default'}){return (<div>hello Welcome,{count},{msg}</div>)
}// 对 Welcome 组件的属性进行类型验证
Welcome.propTypes = {// 验证 count 属性为数字类型count: PropTypes.oneOfType([PropTypes.string,PropTypes.number,]),// 验证 msg 属性为字符串类型msg: PropTypes.string
};function App(){return (<div>hello App<Welcome count={123} msg="hello react"/><Welcome count={123}/></div>)
}export default App

组件需要是纯函数

什么是纯函数？

纯函数只负责自己的任务，他不会更改该函数调用前就已经存在的对象或者变量

输入相同，则输出相同，给定相同的输入，纯函数应该总是返回相同的结果，使用严格模式检测不纯的计算

function App({msg}){let count = 0count ++console.log(count)return (<div>hello App,{msg}</div>)
}export default App// 不纯函数
// let bar = 1
// function foo(){
//     bar++
// }
// foo()

组件的状态和useState函数

瞬间变化的数据被称为状态（state），状态可以进行数据驱动视图，普通变量不行

useState可创建状态和修改状态的方法

状态如何改变视图

为什么普通变量不能呢？是因为无法重新渲染jsx

state状态可行就是因为可以重新触发函数组件，并且state状态具备组件的记忆


import { useState } from "react";
function App(){const [count,setCount] = useState(0)    //可记忆const handleClick = ()=>{setCount(count+1)       //可以重新触发函数组件的执行}console.log(123)return (<div>hello App<button onClick={handleClick}>点击</button>{count}</div>)
}export default App

渲染与提交的过程分为三个步骤

步骤一：触发一次渲染

组件的初次渲染，createRoot().render()

内部状态更新，触发渲染送入队列

步骤二：渲染您的组件

在初次进行渲染的时候，react会调用根组件

内部状态更新会渲染对应的函数组件

步骤三：提交到DOM上

初次渲染，appendChild() DOM API

内部状态更新，更新差异的DOM节点

REACT--组件通信

组件之间如何进行通信？ 组件通信组件的通信主要借助props传递值分为整体接收、解构接收整体接收 import PropTypes from prop-types;//子组件 function Welcome(props){return (<div>hello Welcome,{props.count},{props.msg}</div>) }// 对 We…...

编程日记 2025/9/17 21:46:40

第16届蓝桥杯模拟赛3 python组个人题解

第16届蓝桥杯模拟赛3 python组思路和答案不保证正确 1.填空如果一个数 p 是个质数，同时又是整数 a 的约数，则 p 称为 a 的一个质因数。请问， 2024 的最大的质因数是多少？ 因为是填空题，所以直接枚举2023~2 &am…...

编程日记 2025/9/15 1:17:32

FFMPEG编码容错处理解决办法之途径----升级库文件

在qt开发环境下接收网络数据，调用ffmpeg解码播放视频，出现闪屏现象，具体现象可以使用操作系统自带的ffplay播放器播放原始视频流可复现；而使用操作系统自带的mpv播放器播放视频则不会出现闪屏；闪屏时会报Could not fin…...

编程日记 2025/9/13 22:22:18

kkFileView报错no office manager available

背景部署环境：虚机Linux系统发生问题的版本：4.1.0-SNAPSHOT 现象：有的docx文件可以预览，有的不可以。不可以的就怎么打开都不可以（不管你是躺着，站着，坐着，睡着，趴着都不行，哈哈）报错内容贴出主要的报错内容步骤： > no office manager available > tr…...

编程日记 2025/9/13 22:22:16

C++ 设计模式-模板方法模式

文件处理 #include <iostream>// 抽象基类：定义模板方法和抽象步骤 class DataProcessor { public:// 模板方法（固定流程）void Process() {OpenFile();ProcessData(); // 由子类实现CloseFile();}protected:virtual void ProcessData…...

编程日记 2025/9/13 18:12:24

MacOS下使用Ollama本地构建DeepSeek并使用本地Dify构建AI应用

目录 1 大白话说一下文章内容2 作者的电脑配置3 DeepSeek的本地部署3.1 Ollamal的下载和安装3.2 选择合适的deepseek模型3.3 安转deepseek 4 DifyDeepSeek构建Al应用4.1 Dify的安装4.1.1 前置条件4.1.2 拉取代码4.1.3 启动Dify 4.2 Dify控制页面4.3 使用Dify实现个“文章标题生…...

编程日记 2025/9/13 22:22:13

区块链相关方法-波士顿矩阵 (BCG Matrix)

波士顿矩阵（BCG Matrix），又称市场增长率 - 相对市场份额矩阵、波士顿咨询集团法、四象限分析法、产品系列结构管理法等，由美国著名的管理学家、波士顿咨询公司创始人布鲁斯・亨德森于 1970 年首创1。以下是关于波士顿矩阵的详细介…...

编程日记 2025/9/16 9:03:36

命令执行漏洞 Command Execute

命令执行漏洞（Command Injection）是一种安全漏洞，指的是攻击者能够在应用程序的命令行中注入并执行恶意命令。简单来说，就是攻击者可以利用这个漏洞让程序执行自己指定的命令，而不是程序原本应该执行的命令。举个例子…...

编程日记 2025/9/12 1:53:04

黑马点评_商品信息缓存模块

保证缓存不要有空档期删除后马上要写入中间不能插入任何阶段(如查询数据库) 对于单体系统1，将缓存与数据库操作放在同一个事务中（当前项目就是一个单体项目，所以选择这种方式） 对于分布式系统2，利用TCC（Tr…...

编程日记 2025/9/8 7:04:41

socket()函数的概念和使用案例

socket()函数的概念（C语言） 在C语言中，socket() 函数是用于创建一个新的套接字，它是网络编程的基础。套接字可以看作是不同计算机进程间通信的一个端点，允许数据在网络中的发送和接收。 socket() 函数的原型定义在 &l…...

编程日记 2025/9/10 20:16:02

【架构】事件驱动架构（Event - Driven Architecture，EDA）

一、事件驱动架构理论基础事件驱动架构（Event - Driven Architecture，EDA）是一种软件设计范式，事件驱动的体系结构由生成事件流、侦听这些事件的事件使用者以及将事件从生成者传输到使用者的事件通道组成。在事件驱动架构中，系统的行为由事件触发。事件可几乎实时发送，…...

编程日记 2025/9/13 16:53:34

三、linux字符驱动详解

在上一节完成NFS开发环境的搭建后，本节将探讨Linux字符设备驱动的开发。字符设备驱动作为Linux内核的重要组成部分，主要负责管理与字符设备（如串口、键盘等）的交互，并为用户空间程序提供统一的读写操作接口。驱动代码…...

编程日记 2025/9/13 20:23:09

14.9 Auto-GPT 提示工程深度解析：设计具备自主决策能力的智能体大脑

Auto-GPT 提示工程深度解析：设计具备自主决策能力的智能体大脑关键词：Auto-GPT 提示工程、结构化提示模板、工具调用触发、动态上下文管理、自主决策优化 1. 自主智能体提示设计的核心原则 Prompt 设计三维度模型： #mermaid-svg-jHMGjPZTQA8Op385 {font-family:"tre…...

编程日记 2025/9/13 22:22:09

【p-camera-h5】一款开箱即用的H5相机插件，支持拍照、录像、动态水印与样式高度定制化。

【开源推荐】p-camera-h5：一款轻量级H5相机插件开发实践一、插件背景在Web开发中，原生摄像头功能的集成往往面临以下痛点： 浏览器兼容性问题视频流与水印叠加实现复杂移动端适配困难功能定制成本高为此，p-camera-h5 —— 一…...

编程日记 2025/9/16 7:49:15

c++中sleep是什么意思（不是Sleep() )

sleep 函数在 C 语言中用于暂停程序执行指定的秒数，语法为 sleep(unsigned int seconds)。当 seconds 为 0 时，函数立即返回，否则函数将使进程暂停指定的秒数，并返回实际暂停的时间。 sleep 函数在 C 中的含义 sleep 函数是 C 标…...

编程日记 2025/9/14 20:49:43

优品指标树

目录大势型超买超卖型超势型能量型成交量型均线型路径型指南针经典指标神系经典指标庄家克星经典指标大智慧经典指标钱龙经典指标同花顺经典指标通达信经典指标操盘手经典指标期货特色指标股票特色推荐用户推荐共享指标名家经典战法指标…...

编程日记 2025/9/15 0:53:16

springboot多实例部署时，@Scheduled注释的方法重复执行

问题：springboot多实例部署时，Scheduled注释的方法重复执行在 Spring Boot 中要实现 Redis 的SET NX EX命令，可以借助 Spring Data Redis 来完成。SET NX EX命令用于在键不存在时设置键值对，并同时设置过期时间。 <dependen…...

编程日记 2025/9/13 22:22:02

智能自动化新纪元：AI与UiPath RPA的协同应用场景与技术实践

智能自动化新纪元：AI与UiPath RPA的协同应用场景与技术实践引言在数字化转型的浪潮中，企业对于自动化技术的需求已从简单的任务执行转向更复杂的智能决策。传统RPA（Robotic Process Automation）通过模拟人类操作处理重复性任务…...

编程日记 2025/9/13 19:46:13

[STM32 - 野火] - - - 固件库学习笔记 - - - 十六.在SRAM中调试代码

一、简介在RAM中调试代码是一种常见的嵌入式开发技术，尤其适用于STM32等微控制器。它的核心思想是将程序代码和数据加载到微控制器的内部RAM（SRAM）中运行，而不是运行在Flash存储器中。这种方法在开发过程中具有显著的优势&#…...

编程日记 2025/9/13 19:46:11

nginx 反向代理配置请求路由

nginx | 反向代理 | 配置请求路由 nginx简介 Nginx（发音为“Engine-X”）是一款高性能、开源的 Web 服务器和反向代理服务器，同时也支持邮件代理和负载均衡等功能。它由俄罗斯程序员伊戈尔西索夫（Igor Sysoev）于 2004…...

编程日记 2025/9/13 19:46:09

第二届粤港澳大湾区数字经济与人工智能国际学术会议(DEAI 2025)

重要信息 2025年3月28-30日 I 广东省东莞市(广东科技学院-松山湖校区） I www.icdeai.com 简介第二届粤港澳大湾区数字经济与人工智能(DEAI 2025)将在2025年3月28-30日在广东省东莞市隆重举行。来自国内外高等院校、科学研究所、企事业单位的专家、教授、学者、…...

编程日记 2025/9/13 19:46:07

使用GDI+、文件和目录和打印API，批量将图片按文件名分组打包成PDF

代码写了两个小时，速度太慢（包括学习文档的时间） #include <stdio.h> #include <Windows.h> #include <gdiplus.h> #include <string.h> using namespace Gdiplus; #pragma comment(lib, "Gdiplus.lib") …...

编程日记 2025/9/13 19:46:06

贪心算法

int a[1000], b5, c8; swap(b, c); // 交换操作 memset(a, 0, sizeof(a)); // 初始化为0或-1 引导问题为一个小老鼠准备了M磅的猫粮，准备去和看守仓库的猫做交易，因为仓库里有小老鼠喜欢吃的五香豆，第i个房间有J[i] 磅的五香豆&#xf…...

编程日记 2025/9/13 19:46:04

如何查询网站是否被百度蜘蛛收录？

一、使用site命令查询这是最直接的方法。在百度搜索框中输入“site:你的网站域名”，例如“site:example.com”（请将“example.com”替换为你实际的网站域名）。如果搜索结果显示了你的网站页面，并且显示了收录的页面数量&#xf…...

编程日记 2025/9/13 19:46:02

Hutool - Log：自动识别日志实现的日志门面

一、简介在 Java 开发中，日志记录是一项非常重要的功能，它可以帮助开发者在开发和生产环境中监控程序的运行状态、排查问题。然而，Java 生态系统中有多种日志实现框架，如 Log4j、Logback、JDK 自带的日志框架等。为了在不同的项…...

编程日记 2025/9/13 19:46:00

【GPU驱动】- 状态机

一、概述 Mesa 是一个开源的图形库，它提供了一个通用的图形抽象层，支持多种硬件和驱动程序。Mesa 的核心组件之一是 State Tracker，它在抽象图形 API（如 OpenGL ）与具体的图形驱动之间起到桥梁作用。State Tracker 通…...

编程日记 2025/9/15 20:08:39

rtcwake - Linux下定时唤醒计算机

rtcwake 是一个用于通过实时时钟（RTC）唤醒计算机的工具。它常用于在 Linux 系统中设置计算机在指定时间自动唤醒或关闭。以下是对命令 rtcwake -m off -s ${sleep_time} 的详细解析： 命令解析 bash复制 rtcwake -m off -s ${sleep_time} 1…...

编程日记 2025/9/17 20:30:20

MySQL 日志

MySQL 日志慢查询日志(Slow query log) 慢查询⽇志由执⾏时间超过系统变量 long_query_time 指定的秒数的SQL语句组成，并且检查的⾏数⼤于系统变量 min_examined_row_limit 指定值。被记录的慢查询需要进⾏优化， 可以使⽤mysqldumpslow客⼾端程序对慢…...

编程日记 2025/9/13 19:45:54

C++ 泛型编程之补充(class 和typename)

目录 1.class 和 typename 可互换 1.1 template 和 template 在模板参数列表中完全一样，可以互换使用。 2.什么时候 class 和 typename 不一样？ 2.1 嵌套依赖类型时必须用typename 重点说明： 2.2 普通作用域（不能互换&…...

编程日记 2025/9/15 8:35:55

[MDM 2024]Spatial-Temporal Large Language Model for Traffic Prediction

论文网址：[2401.10134] Spatial-Temporal Large Language Model for Traffic Prediction 论文代码：GitHub - ChenxiLiu-HNU/ST-LLM: Official implementation of the paper "Spatial-Temporal Large Language Model for Traffic Prediction" …...

编程日记 2025/9/13 19:45:51

跟着 Lua 5.1 官方参考文档学习 Lua (6)

文章目录 2.11 – Coroutines 2.11 – Coroutines Lua supports coroutines, also called collaborative multithreading. A coroutine in Lua represents an independent thread of execution. Unlike threads in multithread systems, however, a coroutine only suspends i…...

编程日记 2025/9/15 17:12:14