从0学习React(9)

代码解析

const changeOrg = (orgId) => {queryData.orgId = orgId;delete queryData.deviceClassifyId;setQueryData(queryData);actionRef.current?.reset();loadTreeData(orgId);
};
1. const changeOrg = (orgId) => { ... };
  • 这是一个箭头函数(arrow function)的声明。
  • changeOrg 是函数的名称。
  • orgId 是函数的参数,表示新的组织机构 ID。
2. queryData.orgId = orgId;
  • 直接修改 queryData 对象的 orgId 属性,将其设置为新的 orgId
3. delete queryData.deviceClassifyId;
  • 使用 delete 运算符删除 queryData 对象的 deviceClassifyId 属性。
4. setQueryData(queryData);
  • 调用 setQueryData 函数,将更新后的 queryData 对象传递给它。
  • 假设 setQueryData 是一个用于更新查询参数的状态更新函数。
5. actionRef.current?.reset();
  • 使用可选链(optional chaining)运算符 ?. 来安全地访问 actionRef.current 对象的 reset 方法。
  • 如果 actionRef.current 存在,则调用其 reset 方法。
6. loadTreeData(orgId);
  • 调用 loadTreeData 函数,并传入新的 orgId 作为参数。
  • 假设 loadTreeData 是一个用于加载树形结构数据的函数。

使用的语法和概念

1. 箭头函数(Arrow Function)
  • 箭头函数是一种简洁的函数定义方式,语法为 const functionName = (params) => { ... };
  • 在箭头函数中,this 关键字的行为与普通函数不同,它不会绑定自己的 this,而是继承自外层作用域。
const changeOrg = (orgId) => { ... };
2. 对象属性赋值(Object Property Assignment)
  • 直接修改对象的属性值。
queryData.orgId = orgId;
3. 删除对象属性(Delete Property)
  • 使用 delete 运算符删除对象的属性。
delete queryData.deviceClassifyId;
4. 状态更新函数(State Update Function)
  • setQueryData 假设是 React 的状态更新函数,用于更新组件的状态。
setQueryData(queryData);
5. 可选链(Optional Chaining)
  • 可选链运算符 ?. 用于安全地访问对象的属性或方法,如果对象不存在则返回 undefined
actionRef.current?.reset();
6. 函数调用(Function Call)
  • 调用另一个函数,并传递参数。
loadTreeData(orgId);

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

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

相关文章

【vue】14.插槽:构建可复用组件的关键

今天看代码的时候碰到了插槽&#xff0c;有些看不懂&#xff0c;所以写下这篇文章&#xff0c;系统地梳理一下关于插槽的内容&#xff0c;也希望给大家带来一些帮助。 // 我碰到的插槽长这样 <template #default"scope">... </template> 一.什么是插槽…

阿里巴巴店铺商品API返回值中的商品分类与筛选条件

阿里巴巴店铺商品API返回值中的商品分类与筛选条件对于电商平台的运营和用户购物体验至关重要。以下是对这两个方面的详细解析&#xff1a; 一、商品分类 商品分类是指将商品按照其属性、用途、材质等因素进行归类&#xff0c;以便商家和用户更好地管理和查找商品。在阿里巴巴…

Electron 是一个用于构建跨平台桌面应用程序的开源框架

Electron 是一个用于构建跨平台桌面应用程序的开源框架。它结合了 Chromium&#xff08;用于网页渲染的浏览器引擎&#xff09;和 Node.js&#xff08;用于后端开发的 JavaScript 运行时&#xff09;&#xff0c;允许开发者使用熟悉的 HTML、CSS 和 JavaScript 技术来开发桌面应…

影刀RPA与Python作为爬虫的对比

1.概要 RPA&#xff08;Robotic Process Automation&#xff0c;机器人流程自动化&#xff09;是一种业务流程自动化技术&#xff0c;它通过软件机器人或“虚拟劳动力”来模拟和集成人类用户与数字系统之间的交互。RPA工具可以自动执行重复性的、基于规则的任务&#xff0c;这…

camera和lidar外参标定

雷达和相机的外参标定&#xff08;外部参数标定&#xff09;指的是确定两者之间的旋转和平移关系&#xff0c;使得它们的坐标系可以对齐。 文章目录 无目标标定livox_camera_calibdirect_visual_lidar_calibration 有目标标定velo2cam_calibration 无目标标定 livox_camera_ca…

如何帮助8502万残障人士驶出「孤岛」?

【潮汐商业评论/原创】 对于残障人士来说&#xff0c;“出行”无异于从一座孤岛跳到另一座孤岛。 正常人乘坐的出租车&#xff0c;对于行动不便的乘客来说&#xff0c;或如同“受难场”&#xff1a;从下轮椅到坐上出租车后座的咫尺距离&#xff0c;尽管只需迈出几步&#xff…

数据结构和算法-动态规划(3)-经典问题

动态规划常见问题 打家劫舍 题目 [力扣198] 198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 题目描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&…

深入理解Redis的四种模式

Redis是一个内存数据存储系统&#xff0c;支持多种不同的部署模式。以下是Redis的四种主要部署模式。 1、单机模式 单机模式是最简单的部署模式&#xff0c;Redis将数据存储在单个节点上。这个节点包括一个Redis进程和一个持久化存储。单机模式非常适合小型应用程序或者开发和…

[NeetCode 150] Foreign Dictionary

Foreign Dictionary There is a foreign language which uses the latin alphabet, but the order among letters is not “a”, “b”, “c” … “z” as in English. You receive a list of non-empty strings words from the dictionary, where the words are sorted lex…

Flutter实战短视频课程

1、课程导学 一套代研运行多蜡 体州一致&#xff0c;目胜能优昇 未来大趋势 不改交原生项目的基础上&#xff0c;扩展Flutter能力 Flutter原生灵话切涣 0入侵 最简单、最通用 最新Flutter 3,x新特性讲解 大量flutter官方组件和api学习 最常用的第三方库使用及原理解析 自研组…

消息队列-Rabbitmq(消息发送,消息接收)

将来我们开发业务功能的时候&#xff0c;肯定不会在控制台收发消息&#xff0c;而是应该基于编程的方式。由于RabbitMQ采用了AMQP协议&#xff0c;因此它具备跨语言的特性。任何语言只要遵循AMQP协议收发消息&#xff0c;都可以与RabbitMQ交互。并且RabbitMQ官方也提供了各种不…

编程的魅力与价值

编程&#xff0c;这一门融合了逻辑、创造与无限可能的技艺&#xff0c;早已超越了单纯的技术范畴&#xff0c;它成为了连接现实与虚拟、过去与未来的桥梁。在这个数字化时代&#xff0c;编程不仅是程序员的职业技能&#xff0c;更是许多人探索世界、实现梦想的钥匙。本文将从编…

QT相机连接与拍照

先看效果 编辑:已添加虚拟键盘辅助输入,添加二维码识别,用的QZxing 初始化 auto mainLayout = new QHBoxLayout(this);m_viewfinder = new QCameraViewfinder(this);m_viewfinder->setStyleSheet("border-radius: 20px;background-color:rgb(43,48,70)");mainL…

ubuntu openmpi安装(超简单)

openmpi安装 apt update apt install openmpi-bin openmpi-common libopenmpi-dev安装到此完毕 测试一下&#xff0c;success !

Go语言有哪些数据类型?

Go语言提供了丰富的内置数据类型&#xff0c;可以分为以下几类&#xff1a; 1.基本数据类型 布尔型 (bool)&#xff1a;表示逻辑值 true 或 false。 整数型&#xff1a; int&#xff1a;普通整数&#xff0c;大小取决于平台&#xff08;32位或64位&#xff09;。 int8&#x…

【C++】string 类深度解析:探秘字符串操作的核心

快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。 目录 &#x1f4af;前言 &#x1f4af;为什么要学习 string 类 &#xff08;一&#xff09;简化操作 &#xff08;二&#xff09;确保安全 &#xff08;三…

【EndNote版】如何在Word中引用文献

1、在Word中&#xff0c;鼠标光标放在所需插入文献的位置 2、点击选项卡中的“EndNote X9”&#xff0c;直接在EndNote中选中对应的文献 3、选中文献&#xff0c;点击工具栏中的“引用” 4、最后就可在Word中看到所插入的文献

[面试题]ES6 Javascript

ES6 箭头函数和普通函数有什么区别? 1)定义方式:箭头函数使用箭头(>)语法&#xff0c;省略了 function 关键字。 2)参数处理:如果只有一个参数&#xff0c;箭头函数可以省略括号。 3)函数体:如果函数体只有一条语句&#xff0c;箭头函数可以省略花括号和 return 关键字 4)…

Leetcode 二叉树中的最大路径和

算法思想 这道题要求在一棵二叉树中找到路径和最大的路径。路径可以从树中任意一个节点开始&#xff0c;到任意一个节点结束&#xff0c;但路径上的节点必须是连续的。 算法使用递归的方式来遍历树中的每个节点&#xff0c;并在遍历过程中计算包含当前节点的最大路径和。具体…

计算机视觉实验一:图像基础处理

1. 图像的直方图均衡 1.1 实验目的与要求 (1)理解直方图均衡的原理与作用; (2)掌握统计图像直方图的方法; (3)掌握图像直方图均衡的方法。 1.2 实验原理及知识点 直方图均衡化是通过灰度变换将一幅图象转换为另一幅均衡直方图&#xff0c;即在每个灰度级上都具有相同的象素…