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

react传递函数与回调函数原理

news 来源：原创 2025/9/22 0:46:41

为什么 React 允许直接传递函数？

回调函数核心逻辑 

 

例子：父组件控制 Modal 的显示与隐藏

// 父组件 (ParentComponent.tsx)
import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import ModalContent from './ModalContent';const ParentComponent = () => {const [visible, setVisible] = useState(false);// 用于关闭 Modal 的回调函数const hideModal = () => setVisible(false);return (<><Button type="primary" onClick={() => setVisible(true)}>新增算子</Button><Modaltitle="新增算子"visible={visible}onCancel={hideModal}  // 关闭 Modal 的回调函数footer={null}  // 自定义 footer 按钮>{/* 将回调函数传递给子组件 */}<ModalContent onClose={hideModal} /></Modal></>);
};export default ParentComponent;

// 子组件 (ModalContent.tsx)
import React from 'react';
import { Button } from 'antd';interface ModalContentProps {onClose: () => void;  // 父组件传递来的回调函数
}const ModalContent: React.FC<ModalContentProps> = ({ onClose }) => {return (<div><p>这是新增算子的内容</p><Button type="primary" onClick={onClose}>确认</Button>  {/* 调用传递来的回调函数 */}<Button onClick={onClose}>取消</Button>  {/* 调用传递来的回调函数 */}</div>);
};export default ModalContent;

 

具体例子

父组件

          <div><Modaltitle="添加算子"open={open}confirmLoading={confirmLoading}onOk={handleOk}onCancel={handleCancel}centered={true}footer={null} // 不使用 Modal 自带的 footer><AddOptsModal onCancel={handleCancel}></AddOptsModal></Modal></div>const [open, setOpen] = useState(false)const handleCancel = () => {setOpen(false)}

 子组件

import { Button } from 'antd'
interface AddOptsModalProps {onCancel: () => void
}const AddOptsModal: React.FC<AddOptsModalProps> = ({ onCancel }) => {return (<div><Button onClick={onCancel}>关闭</Button></div>)
}
export default AddOptsModal

 

相关文章：

react传递函数与回调函数原理

为什么 React 允许直接传递函数&#xff1f; 回调函数核心逻辑 例子&#xff1a;父组件控制 Modal 的显示与隐藏 // 父组件 (ParentComponent.tsx) import React, { useState } from react; import { Modal, Button } from antd; import ModalContent from ./ModalContent;co…...

编程日记 2025/9/22 0:46:41

目标检测IoU阈值全解析：YOLO/DETR模型中的精度-召回率博弈与工程实践指南

一、技术原理与数学本质 IoU计算公式&#xff1a; IoU \frac{Area\ of\ Overlap}{Area\ of\ Union} \frac{A ∩ B}{A ∪ B}阈值选择悖论&#xff1a; 高阈值&#xff08;0.6-0.75&#xff09;&#xff1a;减少误检&#xff08;FP↓&#xff09;但增加漏检&#xff08;FN↑…...

编程日记 2025/9/16 9:58:14

使用grafana v11 建立k线(蜡烛图)仪表板

先看实现的结果 沪铜主力合约 2025-02-12 的1分钟k线图 功能介绍: 左上角支持切换主力合约,日期,实现动态加载数据. 项目背景: 我想通过前端展示期货指定品种某1天的1分钟k线,类似tqsdk 的web_gui 生成图形化界面— TianQin Python SDK 3.7.8 文档 项目架构: 后端: fastap…...

编程日记 2025/9/21 7:34:45

Ubuntu下载安装Docker-Desktop

下载 Ubuntu | Docker Docs 预备工作 Ubuntu增加docker apt库-CSDN博客 安装 sudo apt-get updatesudo apt install gnome-terminal# sudo apt install -y docker-composesudo apt-get install ./docker-desktop-amd64.deb 测试 sudo docker run hello-worldHello from D…...

编程日记 2025/9/16 9:56:15

【大模型】DeepSeek 高级提示词技巧使用详解

目录 一、前言 二、DeepSeek 通用提示词技巧 2.1 DeepSeek 通用提示词技巧总结 三、DeepSeek 进阶使用技巧 3.1 DeepSeek一个特定角色的人设 3.1.1 为DeepSeek设置角色操作案例一 3.1.2 为DeepSeek设置角色操作案例二 3.2 DeepSeek开放人设升级 3.2.1 特殊的人设&#…...

编程日记 2025/9/19 14:28:25

23. AI-大语言模型

文章目录 前言一、LLM1. 简介2. 工作原理和结构3. 应用场景4. 最新研究进展5. 比较 二、Transformer架构1. 简介2. 基本原理和结构3. 应用场景4. 最新进展 三、开源1. 开源概念2. 开源模式3. 模型权重 四、再谈DeepSeek 前言 AI‌ 一、LLM LLM&#xff08;Large Language Mod…...

编程日记 2025/9/22 0:45:40

STM32的启动流程

启动模式 我们知道的复位方式有三种&#xff1a;上电复位&#xff0c;硬件复位和软件复位。当产生复位&#xff0c;并且离开复位状态后&#xff0c; CM33 内核做的第一件事就是读取下列两个 32 位整数的值&#xff1a; &#xff08;1&#xff09; 从地址 0x0000 0000 处取出堆…...

编程日记 2025/9/20 19:20:38

C++ Primer 函数匹配

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…...

编程日记 2025/9/18 7:13:09

Httprint 指纹识别技术：网络安全的关键洞察

引言 Http指纹识别现在已经成为应用程序安全中一个新兴的话题&#xff0c;Http服务器和Http应用程序安全也已经成为网络安全中的重要一部分。从网络管理的立场来看&#xff0c;保持对各种web服务器的监视和追踪使得Http指纹识别变的唾手可得&#xff0c;Http指纹识别可以使得信…...

编程日记 2025/9/22 0:36:24

STM32的HAL库开发---ADC

一、ADC简介 1、ADC&#xff0c;全称&#xff1a;Analog-to-Digital Converter&#xff0c;指模拟/数字转换器 把一些传感器的物理量转换成电压&#xff0c;使用ADC采集电压&#xff0c;然后转换成数字量&#xff0c;经过单片机处理&#xff0c;进行控制和显示。 2、常见的AD…...

编程日记 2025/9/22 0:45:41

PostgreSQL有undo表空间吗？

PostgreSQL有undo表空间吗 PostgreSQL 没有单独的 Undo 表空间&#xff0c;其事务回滚和多版本并发控制&#xff08;MVCC&#xff09;机制与 Oracle 等数据库有显著差异。 一 PostgreSQL 的 MVCC 实现 PostgreSQL 通过 多版本并发控制&#xff08;MVCC&#xff09; 管理事务…...

编程日记 2025/9/19 19:00:23

Huatuo热更新--安装HybridCLR

1.自行安装unity编辑器 支持2019.4.x、2020.3.x、2021.3.x、2022.3.x 中任一版本。推荐安装2019.4.40、2020.3.26、2021.3.x、2022.3.x版本。 根据你打包的目标平台&#xff0c;安装过程中选择必要模块。如果打包Android或iOS&#xff0c;直接选择相应模块即可。如果你想打包…...

编程日记 2025/9/21 6:55:19

Windows环境安装部署minimind步骤

Windows环境安装部署minimind步骤 必要的软件环境 git git&#xff0c;可下载安装版&#xff0c;本机中下载绿色版&#xff0c;解压到本地目录下&#xff08;如&#xff1a;c:\soft\git.win64&#xff09;&#xff0c;可将此路径添加到PATH环境变量中&#xff0c;供其他程序…...

编程日记 2025/9/21 16:13:05

前端面试手写--虚拟列表

目录 一.问题背景 二.代码讲解 三.代码改装 四.代码发布 今天我们来学习如何手写一个虚拟列表,本文将把虚拟列表进行拆分并讲解,然后发布到npm网站上. 一.问题背景 为什么需要虚拟列表呢?这是因为在面对大量数据的时候,我们的浏览器会将所有数据都渲染到表格上面,但是渲…...

编程日记 2025/9/20 18:25:47

【算法进阶详解 第一节】树状数组

【算法进阶详解 第一节】树状数组 前言树状数组基础树状数组原理树状数组能够解决的问题 树状数组提高树状数组区间加&#xff0c;区间和操作二维树状数组 树状数组应用树状数组区间数颜色树状数组二维偏序 前言 树状数组在算法竞赛中十分常见&#xff0c;其能解决二维数点&am…...

编程日记 2025/9/22 0:46:41

青少年编程与数学 02-009 Django 5 Web 编程 16课题、权限管理

青少年编程与数学 02-009 Django 5 Web 编程 16课题、权限管理 一、授权授权的主要特点和作用授权的类型应用场景 二、权限系统使用Django内置的权限系统使用组管理权限使用第三方库在视图中应用权限 三、权限管理示例步骤 1: 创建Django项目和应用步骤 2: 定义模型和权限步骤 …...

编程日记 2025/9/22 0:45:39

第四十四篇--Tesla P40+Janus-Pro-7B部署与测试

环境 系统&#xff1a;CentOS-7 CPU: 14C28T 显卡&#xff1a;Tesla P40 24G 驱动: 515 CUDA: 11.7 cuDNN: 8.9.2.26创建环境 conda create --name trans python3.10torch 2.6.0 transformers 4.48.3克隆项目 git clone https:/…...

编程日记 2025/9/22 0:44:12

低成本、高效率且成熟的电商实时数据采集方案：梦想成真？

在电子商务领域&#xff0c;数据是驱动业务决策的核心资源。实时数据采集对于电商企业而言&#xff0c;意味着能够即时洞察市场动态、消费者行为以及运营效果&#xff0c;从而快速调整策略&#xff0c;提升竞争力。然而&#xff0c;如何在保证数据质量的同时&#xff0c;实现低…...

编程日记 2025/9/19 8:26:42

微信小程序之mobx-miniprogram状态管理

目前已经学习了6种小程序页面、组件间的数据通信方案,分别是: 1. 数据绑定: properties 2.获取组件实例: this.selectComponent() 3.事件绑定: this.triggerEvent() 4. 获取应用实例&#xff1a;getApp() 5. 页面间通信: EventChannel 6.事件总线:pubsub-js 在中小型项目…...

编程日记 2025/9/22 0:45:39

uniapp可视化-活动报名表单系统-代码生成器

活动报名表单系统小程序旨在为各类活动组织者提供一个便捷、高效的线上报名管理平台&#xff0c;同时为参与者提供简单易用的报名途径。 主要功能 活动发布&#xff1a;活动组织者可以发布活动的详细信息&#xff0c;包括活动名称、时间、地点、活动内容等。用户可以在小程序中…...

编程日记 2025/9/18 0:39:09

1.从零开始学会Vue--{{基础指令}}

全新专栏带你快速掌握Vue2Vue3 1.插值表达式{{}} 插值表达式是一种Vue的模板语法 我们可以用插值表达式渲染出Vue提供的数据 1.作用&#xff1a;利用表达式进行插值&#xff0c;渲染到页面中 表达式&#xff1a;是可以被求值的代码&#xff0c;JS引擎会将其计算出一个结果 …...

编程日记 2025/9/15 17:20:48

深入解析操作系统控制台：阿里云Alibaba Cloud Linux（Alinux）的运维利器

作为一位个人开发者兼产品经理&#xff0c;我的工作日常紧密围绕着云资源的运维和管理。在这个过程中&#xff0c;操作系统扮演了至关重要的角色&#xff0c;而操作系统控制台则成为了我们进行系统管理的得力助手。本文将详细介绍阿里云的Alibaba Cloud Linux操作系统控制台的功…...

编程日记 2025/9/22 0:46:40

CSS Grid 网格布局，以及 Flexbox 弹性盒布局模型，它们的适用场景是什么？

CSS Grid网格布局和Flexbox弹性盒布局模型都是现代CSS布局的重要工具&#xff0c;它们各自具有独特的优势和适用场景。 作为前端开发工程师&#xff0c;理解这些布局模型的差异和适用场景对于编写高效、可维护的代码至关重要。 CSS Grid网格布局 适用场景&#xff1a; 复杂…...

编程日记 2025/9/20 22:23:02

2025.2.16机器学习笔记：TimeGan文献阅读

2025.2.9周报 一、文献阅读题目信息摘要Abstract创新点网络架构一、嵌入函数二、恢复函数三、序列生成器四、序列判别器损失函数 实验结论后续展望 一、文献阅读 题目信息 题目&#xff1a; Time-series Generative Adversarial Networks会议&#xff1a; Neural Information…...

编程日记 2025/9/21 12:50:49

高通推出骁龙游戏超级分辨率™：充分释放移动游戏性能，带来更持久的续航

Snapdragon Elite Gaming 一直致力于为每位用户打造卓越游戏体验。骁龙支持众多端游级特性&#xff0c;包括144FPS游戏体验、True 10-bit HDR支持的最高视觉质量的超流畅图形&#xff0c;让玩家可以畅享超10亿色的游戏体验。骁龙将许多移动端首创特性引入备受玩家喜爱的游戏中&…...

编程日记 2025/9/21 14:49:27

golangAPI调用deepseek

目录 1.deepseek官方API调用文档1.访问格式2.curl组装 2.go代码1. config 配置2.模型相关3.错误处理4.deepseekAPI接口实现5. 调用使用 3.响应实例 1.deepseek官方API调用文档 1.访问格式 现在我们来解析这个curl 2.curl组装 // 这是请求头要加的参数-H "Content-Type:…...

编程日记 2025/9/21 8:14:27

SOC芯片前端设计对芯片电源完整性的影响

在进行芯片的电源完整性时&#xff0c;因为PI受影响的因素较多&#xff0c;出现问题debug也比较难&#xff0c;所以在进行芯片设计时&#xff0c;需要端到端从前到后进行考虑设计&#xff0c;本篇文章将从芯片前端设计的角度来看看哪些因素会影响到PI的设计。 芯片前端设计的主…...

编程日记 2025/9/20 23:19:21

【区块链】零知识证明基础概念详解

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 零知识证明基础概念详解引言1. 零知识证明的定义与特性1.1 基本定义1.2 三个核心…...

编程日记 2025/9/19 16:46:50

面基Spring Boot项目中实用注解一

在Spring Boot项目中&#xff0c;实用注解根据功能可以分为多个类别。以下是常见的注解分类、示例说明及对比分析&#xff1a; 1. 核心配置注解 SpringBootApplication 作用&#xff1a;标记主启动类&#xff0c;组合了Configuration、EnableAutoConfiguration和ComponentScan…...

编程日记 2025/9/19 5:35:56

最新智能优化算法： 中华穿山甲优化（ Chinese Pangolin Optimizer ，CPO）算法求解23个经典函数测试集，MATLAB代码

中华穿山甲优化&#xff08; Chinese Pangolin Optimizer &#xff0c;CPO&#xff09;算法由GUO Zhiqing 等人提出&#xff0c;该算法的灵感来自中华穿山甲独特的狩猎行为&#xff0c;包括引诱和捕食行为。 算法流程如下&#xff1a; 1. 开始 设置算法参数和最大迭代次数&a…...

编程日记 2025/9/16 10:12:45

shell脚本备份MySQL数据库和库下表

目录 注意&#xff1a; 一.脚本内容 二.执行效果 三.创建定时任务 注意&#xff1a; 以下为对MySQL5.7.42版本数据库备份shell脚本参考运行备份的机器请确认mysqldump版本>5.7&#xff0c;否则备份参数--set-gtid-purgedOFF无效&#xff0c;考虑到一般数据库节点和备份…...

编程日记 2025/9/20 19:12:34

Unity Shader Graph 2D - Procedural程序化图形之渐变的正弦波形

前言 正弦波形也是一种常用、常见的程序化图形&#xff0c;合理的使用正弦波形会创作出一些有趣、美观和丰富的效果&#xff0c;本文将使用Unity Shader Graph来实现一个正弦波形效果&#xff0c;帮助理解和实践Unity Shader Graph以及正弦函数。 创建一个名为SineWave的Shader…...

编程日记 2025/9/18 17:26:57

【算法与数据结构】并查集详解+题目

目录 一&#xff0c;什么是并查集 二&#xff0c;并查集的结构 三&#xff0c;并查集的代码实现 1&#xff0c;并查集的大致结构和初始化 2&#xff0c;find操作 3&#xff0c;Union操作 4&#xff0c;优化 小结&#xff1a; 四&#xff0c;并查集的应用场景 省份…...

编程日记 2025/9/19 3:35:52

国家队出手！DeepSeek上线国家超算互联网平台！

目前，国家超算互联网平台已推出 DeepSeek – R1 模型的 1.5B、7B、8B、14B 版本，后续还会在近期更新 32B、70B 等版本。 DeepSeek太火爆了！在这个春节档，直接成了全民热议的话题。 DeepSeek也毫无悬念地干到了全球增速最快的AI应用。这几天，国内的云计算厂家都在支持Dee…...

编程日记 2025/9/20 17:37:27

H5接入支付宝手机网站支付并实现

小程序文档 - 支付宝文档中心 1.登录 支付宝开放平台 创建 网页/移动应用 2.填写创建应用信息 3.配置开发设置 4.网页/移动应用&#xff1a;需要手动上线。提交审核后&#xff0c;预计 1 个工作日的审核时间。详细步骤可点击查看 上线应用 。应用上线后&#xff0c;还需要完成…...

编程日记 2025/9/21 1:26:59

Win10环境借助DockerDesktop部署大数据时序数据库Apache Druid

Win10环境借助DockerDesktop部署最新版大数据时序数据库Apache Druid32.0.0 前言 大数据分析中&#xff0c;有一种常见的场景&#xff0c;那就是时序数据&#xff0c;简言之&#xff0c;数据一旦产生绝对不会修改&#xff0c;随着时间流逝&#xff0c;每个时间点都会有个新的…...

编程日记 2025/9/18 9:17:10

（三）Axure制作转动的唱片

效果图 属性&#xff1a; 图标库&#xff1a;iconfont-阿里巴巴矢量图标库 方形图片转为圆角图片&#xff0c;裁剪&#xff0c;然后加圆角&#xff0c; 唱片和底图是两个图片&#xff0c;点击播放&#xff0c;唱片在旋转。 主要是播放按钮和停止按钮&#xff0c;两个动态面板…...

编程日记 2025/9/18 0:40:40

[JVM篇]分代垃圾回收

分代垃圾回收 分代收集法是目前大部分 JVM 所采用的方法&#xff0c;其核心思想是根据对象存活的不同生命周期将内存划分为不同的域&#xff0c;一般情况下将 GC 堆划分为老生代(Tenured/Old Generation)和新生代(Young Generation)。老生代的特点是每次垃圾回收时只有少量对象…...

编程日记 2025/9/21 7:29:51

SpringBoot多数据源实践：基于场景的构建、实现和事务一体化研究

1. 多数据源应用场景剖析 1.1 业务驱动的多数据源需求 数据量与业务复杂度引发的分库分表&#xff1a;在现代企业级应用中&#xff0c;随着业务的不断拓展和用户量的持续增长&#xff0c;数据量呈爆炸式增长。例如&#xff0c;在大型电商平台中&#xff0c;用户数据、订单数据…...

编程日记 2025/9/21 20:14:25

鸿蒙应用开发者基础

目录 判断题 单选题 多选题 判断题 1、 在http模块中&#xff0c;多个请求可以使用同一个httpRequest对象&#xff0c;httpRequest对象可以复用。&#xff08;错误&#xff09; 2、订阅dataReceiverProgress响应事件是用来接收HTTP流式响应数据。&#xff08;错误&#xff0…...

编程日记 2025/9/16 9:47:59

Java面试第二山！《计算机网络》！

在 Java 面试里&#xff0c;计算机网络知识是高频考点&#xff0c;今天就来盘点那些最容易被问到的计算机网络面试题&#xff0c;帮你轻松应对面试&#xff0c;也方便和朋友们一起探讨学习。 一、HTTP 和 HTTPS 的区别 1. 面试题呈现 HTTP 和 HTTPS 有什么区别&#xff1f;在…...

编程日记 2025/9/20 22:37:16

2025最新Java面试题大全（整理版）2000+ 面试题附答案详解

很多 Java 工程师的技术不错&#xff0c;但是一面试就头疼&#xff0c;10 次面试 9 次都是被刷&#xff0c;过的那次还是去了家不知名的小公司。 问题就在于&#xff1a;面试有技巧&#xff0c;而你不会把自己的能力表达给面试官。 应届生&#xff1a;你该如何准备简历&#…...

编程日记 2025/9/18 16:49:22

低空经济：开启未来空中生活的全新蓝海

引言 随着科技的进步&#xff0c;我们不再仅仅依赖地面交通和传统物流。你是否曾幻想过&#xff0c;未来的某一天&#xff0c;快递、外卖可以像魔法一样直接从空中送到你手中&#xff1f;或者&#xff0c;你能乘坐小型飞行器&#xff0c;快速穿梭于城市之间&#xff0c;告别拥堵…...

编程日记 2025/9/21 11:24:52

【机器学习】线性回归与一元线性回归

【机器学习系列】 KNN算法 KNN算法原理简介及要点 特征归一化的重要性及方式线性回归算法 线性回归与一元线性回归 线性回归模型的损失函数 多元线性回归 多项式线性回归 线性回归与一元线性回归 V1.1线性回归问题线性方程的最优解一元线性回归一元线性回归的方程一元线性回归…...

编程日记 2025/9/21 2:28:14

MongoDB 7 分片副本集升级方案详解（上）

#作者&#xff1a;任少近 文章目录 前言&#xff1a;Mongodb版本升级升级步骤环境1.1环境准备1.2standalone升级1.3分片、副本集升级 前言&#xff1a;Mongodb版本升级 在开始升级之前&#xff0c;请参阅 MongoDB下个版本中的兼容性变更文档&#xff0c;以确保您的应用程序和…...

编程日记 2025/9/16 10:26:46

Fiori APP配置中的Semantic object 小bug

在配置自开发程序的Fiori Tile时&#xff0c;需要填入Semantic Object。正常来说&#xff0c;是需要通过事务代码/N/UI2/SEMOBJ来提前新建的。 但是在S4 2022中&#xff0c;似乎存在一个bug&#xff0c;即无需新建也能输入自定义的Semantic Object。 如下&#xff0c;当我们任…...

编程日记 2025/9/16 10:21:46

坑多多之AC8257 i2c1 rtc-pcf8563

pcf85163 ordering information Ordering information Package Description Version Marking code PCF85163T/1 SO8 ① SOT96-1 PF85163 PCF85163TS/1 TSSOP8 ② SOT505-1 85163 ①plastic small outline package; 8 leads;body width 3.9 mm ②plastic thin…...

编程日记 2025/9/16 10:27:44

制作一个项目用于研究elementUI的源码

需求&#xff1a;修改el-tooltip的颜色&#xff0c;发现传递参数等方法都不太好用&#xff0c;也可以使用打断点的方式&#xff0c;但也有点麻烦&#xff0c;因此打算直接修改源码&#xff0c;把组件逻辑给修改了 第一步下载源码 源码地址 GitHub - ElemeFE/element: A Vue.j…...

编程日记 2025/9/19 2:01:43

Docker高级篇

1.Mysql主从复制Docker版本 mysql主从复制原理 binlog 1.新建主服务器容器实例 docker run -d -p 3307:3306 --privilegedtrue \ -v /opt/mysql8.4.3/log:/var/log/mysql \ -v /opt/mysql8.4.3/conf:/etc/mysql/conf.d \ -v /opt/mysql8.4.3/data:/var/lib/mysql \ -e MYSQL…...

编程日记 2025/9/21 9:24:07

OSI 参考模型和 TCP/IP 参考模型

数据通信是很复杂的&#xff0c;很难在一个协议中完成所有功能。因此在制定协议时经常采用的思路是将复杂的数据通信功能由若干协议分别完成&#xff0c;然后将这些协议按照一定的方式组织起来。最典型的是采用分层的方式来组织协议&#xff0c;每一层都有一套清晰明确的功能和…...

编程日记 2025/9/16 10:30:16