react组件中的共享数据

在前面的示例中,每个 MyButton 都有自己独立的 count,当每个按钮被点击时,只有被点击按钮的 count 才会发生改变:

然而,你经常需要组件 共享数据并一起更新

为了使得 MyButton 组件显示相同的 count 并一起更新,你需要将各个按钮的 state “向上” 移动到最接近包含所有按钮的组件之中。

在这个示例中,它是 MyApp

起初,MyAppcount state 为 0 并传递给了两个子组件

点击后,MyAppcount state 更新为 1,并将其传递给两个子组件

此刻,当你点击任何一个按钮时,MyApp 中的 count 都将改变,同时会改变 MyButton 中的两个 count。具体代码如下:

首先,将 MyButtonstate 上移到 MyApp 中:

export default function MyApp() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}return (<div><h1>Counters that update separately</h1><MyButton /><MyButton /></div>);
}function MyButton() {// ... we're moving code from here ...
}

接着,将 MyApp 中的点击事件处理函数以及 state 一同向下传递到 每个 MyButton 中。你可以使用 JSX 的大括号向 MyButton 传递信息。就像之前向 <img> 等内置标签所做的那样:

export default function MyApp() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1);}return (<div><h1>Counters that update together</h1><MyButton count={count} onClick={handleClick} /><MyButton count={count} onClick={handleClick} /></div>);
}

使用这种方式传递的信息被称作 prop。此时 MyApp 组件包含了 count state 以及 handleClick 事件处理函数,并将它们作为 prop 传递给 了每个按钮。

最后,改变 MyButton读取 从父组件传递来的 prop:

function MyButton({ count, onClick }) {return (<button onClick={onClick}>Clicked {count} times</button>);
}

当你点击按钮时,onClick 处理程序会启动。每个按钮的 onClick prop 会被设置为 MyApp 内的 handleClick 函数,所以函数内的代码会被执行。该代码会调用 setCount(count + 1),使得 state 变量 count 递增。新的 count 值会被作为 prop 传递给每个按钮,因此它们每次展示的都是最新的值。这被称为“状态提升”。通过向上移动 state,我们实现了在组件间共享它。

说白了 就是我们vue 中传递的prop 参数 父向子组件传值 然后子组件接受一下 这个才是react 中的重点语法问题

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

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

相关文章

【MySQL精通之路】InnoDB(6)-磁盘结构(3)-表空间

主博客&#xff1a; 【MySQL精通之路】InnoDB(6)-磁盘上的InnoDB结构-CSDN博客 上一篇&#xff1a; 【MySQL精通之路】Innodb-索引-CSDN博客 下一篇: 【MySQL精通之路】InnoDB-双写缓冲区-CSDN博客 目录 1 系统表空间 1.1 调整系统表空间的大小 1.1.1 增加 1.1.2 减小…

四川邮电职院领导访知了汇智,深化AI专业教育与行业对接

5月16日&#xff0c;四川邮电职业技术学院信息工程学院软件教研室的领导团队莅临我司&#xff0c;就人工智能专业建设进行深入的交流与学习。我司总经理、副总经理等高层领导亲自接待&#xff0c;对学院领导一行的到来表示了热烈的欢迎&#xff0c;并全程陪同参观了公司的核心区…

【技术实操】中标麒麟高级服务器操作系统实例分享,rsync数据同步配置方案

1.rsync介绍 rsync是一款开源的、快速的、多功能的、可实现全量及增量的本地或远程数据同步备份工具。 在守护进程模式&#xff08;daemon mode&#xff09;下&#xff0c;rsync默认监听TCP端口873&#xff0c;以原生rsync传输协议或者通过远程shell如RSH或者SSH提供文件。SS…

几个模型介绍

1. Diffusion Models 简介: Diffusion models是一类生成模型&#xff0c;通过将数据逐渐引入噪声并学会逆向过程&#xff0c;从噪声生成数据。这些模型近年来在图像生成领域取得了显著的进展&#xff0c;例如Denoising Diffusion Probabilistic Models (DDPM)和Score-Based Ge…

基于BERT的中文情感分析实战

数据与代码链接见文末 bert开源项目解读:谷歌开源项目BERT源码解读与应用实例-CSDN博客 基于BERT的中文命名实体识别识别实战:基于BERT的中文命名实体识别识别实战-CSDN博客 1.数据 在data目录下,提供了中文情感分析的数据, 类别1代表正向情感,类别2代表负向情感。

Flutter 中的 CupertinoContextMenuAction 小部件:全面指南

Flutter 中的 CupertinoContextMenuAction 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;CupertinoContextMenuAction 是一个专门用于构建 iOS 风格的上下文菜单选项的组件。它为用户提供了一种便捷的方式来执行与特定项目相关的操作&#xff0c;例如在列表项上长按可…

金融信贷风控基础知识

一、所谓风控(What && Why) 所谓风控&#xff0c;可以拆解从2个方面看&#xff0c;即 风险和控制 风险(what) 风险 这里狭隘的特指互联网产品中存在的风险点&#xff0c;例如 账户风险 垃圾注册账号账号被泄露盗用 交易支付风险 刷单&#xff1a;为提升卖家店铺人气…

第13章 Python建模库介绍

以下内容参考自https://github.com/iamseancheney/python_for_data_analysis_2nd_chinese_version/blob/master/%E7%AC%AC05%E7%AB%A0%20pandas%E5%85%A5%E9%97%A8.md 《利用Python进行数据分析第2版》 用以学习和记录。 本书中&#xff0c;我已经介绍了Python数据分析的编程基…

DETR原理分析

TransformerDetection&#xff1a;引入视觉领域的首创DETR 论文名称&#xff1a;End-to-End Object Detection with Transformers 论文地址&#xff1a;https://arxiv.org/abs/2005.12872 重要的图要经常出现&#xff0c;下图就是&#xff1a; DETR原理分析 网络架构部分解读…

5.23总结

新增功能点 讨论 学生和老师均可发布话题&#xff0c;话题发布后&#xff0c;在该课程的用户可以在发布话题的课程中点击讨论参与课程的讨论&#xff0c;并可以进行评论&#xff0c;回复评论&#xff0c;点赞操作。每个话题发布时可添加多个图片文件&#xff0c;参加讨论的话…

SpringBoot配置tomcat access日志

Spring Boot使用嵌入式的Tomcat作为默认的Web服务器&#xff0c;可以通过配置文件方式来开启和定制access日志。access日志记录了每一个HTTP请求的信息&#xff0c;包括请求的来源、请求的资源、响应状态码等&#xff0c;常常用来做数据统计、性能监控&#xff0c;比如通过分析…

【学习笔记】后端(Ⅰ)—— NodeJS(Ⅱ)

NodeJS 3、进阶篇 —— Express框架 3.1、Express 框架介绍 3.2、Express 框架初体验 3.3、使用 3.4、中间件 3.5、托管静态文件 3.6、获取表单数据 3.7、防盗链 3.8、路由模式化 3.8、EJS 模板引擎 3.9、express-generator…

UNI-APP设置屏幕保持常亮-不熄灭屏幕

前言 最近在实际开发过程中&#xff0c;我们会发现在自己使用的app当中会根据系统无操作熄灭屏幕对于一下需要长时间保持屏幕的业务就很不友好&#xff0c;uni-app也是提供了相应方法加上代码之后-注意app端没报错-不生效就是权限问题-需要设置相对应权限-打自定义包 代码实现…

【BSP开发经验】用户态栈回溯技术

前言 在内核中有一个非常好用的函数dump_stack, 该函数在我们调试内核的过程中可以打印出函数调用关系&#xff0c;该函数可以帮助我们进行内核调试&#xff0c;以及让我们了解内核的调用关系。同时当内核发生崩溃的时候就会自己将自己的调用栈输出到串口。 栈回溯非常有利于我…

溪谷联运SDK功能全面解析

近期&#xff0c;备受用户关注的手游联运10.0.0版本上线了&#xff0c;不少用户也选择了版本更新&#xff0c;其中也再次迎来了SDK的更新。溪谷软件和大家一起盘点一下溪谷SDK的功能都有哪些吧。 一、溪谷SDK具有完整的运营功能和高度扩展性 1.登录&#xff1a;登录是SDK最基础…

物体检测算法-R-CNN,SSD,YOLO

物体检测算法-R-CNN&#xff0c;SSD&#xff0c;YOLO 1 R-CNN2 SSD3 Yolo总结 1 R-CNN R-CNN&#xff08;Region-based Convolutional Neural Network&#xff09;是一种基于区域的卷积神经网络&#xff0c;是第一个成功将深度学习应用到目标检测上的算法。它主要由三个步骤组…

LeetCode 131题详解:高效分割回文串的递归与动态规划方法

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容&#xff0c;和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣&#xff01; 推荐&#xff1a;数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航&#xff1a; LeetCode解锁100…

currentTarget指向监听者Target:指向触发者

在JavaScript的事件处理中&#xff0c;currentTarget 和 target 是两个重要的属性&#xff0c;它们常常用于区分事件处理函数当前绑定的元素和实际触发事件的元素。这两个属性的意义可以用下面的方式解释&#xff1a; currentTarget 指向监听者&#xff1a;这意味着currentTa…

Spring: OncePerRequestFilter

文章目录 一、介绍二、使用 一、介绍 OncePerRequestFilter是Spring Boot中的一个过滤器抽象类&#xff0c;它在Spring Security中也得到了广泛的应用。这个过滤器抽象类的主要目的是确保在每次外部请求时只执行一次过滤操作&#xff0c;对于服务器内部之间的forward等请求&am…

关于如何创建一个可配置的 SpringBoot Web 项目的全局异常处理

前情概要 这个问题其实困扰了我一周时间&#xff0c;一周都在 Google 上旅游&#xff0c;我要如何动态的设置 RestControllerAdvice 里面的 basePackages 以及 baseClasses 的值呢&#xff1f;经过一周的时间寻求无果之后打算决定放弃的我终于找到了一些关键的线索。 当然在此…