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

React(二)


文章目录

  • 项目地址
  • 七、数据流
    • 7.1 子组件传递数据给父组件
      • 7.1.1 方式一:給父设置回调函数,传递给子
      • 7.1.2 方式二:直接将父的setState传递给子
    • 7.2 给props传递jsx
      • 7.2.1 方式一:直接传递组件给子类
      • 7.2.2 方式二:传递函数给子组件
    • 7.3 props类型验证
    • 7.4 props的多层传递
    • 7.5 className的传递以及合并
  • 八、State进阶
    • 8.1 不同组件之间的状态共享
      • 8.1.1 组合组件
      • 8.1.2 找到公共父组件设置状态
      • 8.1.3 根据组件的功能添加事件
      • 8.1.4 两个子组件的设置
    • 8.2 获取上一次的状态,解决异步问题
    • 8.3 useReducer集中处理状态更新逻辑
  • 九、处理组件错误
    • 9.1 处理组件错误
    • 9.2 组件懒加载:分割页面,提高页面速度
    • 9.3 引入svg图标
      • 9.3.1 方式一:和图片导入方式一样
      • 9.3.2 方式二:将svg文件当作组件导入
    • 9.4 使用绝对路径导入
    • 9.5 使用Children防止过度嵌套
    • 9.6 受控组件和非受控组件
      • 9.6.1 受控组件
      • 9.6.2 非受控组件
  • 十、自定义组件
    • 10.1 将普通函数改为自定义Hooks


项目地址

  • 教程作者:
  • 教程地址:
  • 代码仓库地址:
  • 所用到的框架和插件:

七、数据流

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

7.1.1 方式一:給父设置回调函数,传递给子

父组件的设置

在这里插入图片描述
子组件
在这里插入图片描述

7.1.2 方式二:直接将父的setState传递给子

···

  • 该方法父子严重耦合,复用性低,适合父子严重绑定的组件

7.2 给props传递jsx

定义个导航条,可以是组件形式,也可以直接是jsx const nav = <div</div>

//导航组件
function Nav() {return (<div className="menu"><a href="/">首页</a><a href="/product">产品</a><a href="/user">用户</a></div>);
}

7.2.1 方式一:直接传递组件给子类

父类拥有导航组件的控制权

在这里插入图片描述

  • 子组件使用:直接使用
function Layout({ nav, children }) {return (<div className="container"><nav>{nav}</nav><main>{children}</main></div>);
}

7.2.2 方式二:传递函数给子组件

由于传递的组件以函数形式传递,控制权在子
在这里插入图片描述

  • 子组件使用:加了反斜杠,以组件形式使用
function Layout({ Nav, children }) {return (<div className="container"><nav>{<Nav />}</nav><main>{children}</main></div>);
}

7.3 props类型验证

  1. 子组件添加验证
    在这里插入图片描述
  • 可以使用TypeScripts来验证

7.4 props的多层传递

  1. 祖父组件需要传递数据
function App() {const userData = {count: 32.95,rate: "↑8.98%",};return (<main className="container"><UserDataCard message="hello world" userData={userData} /></main>);
}
  1. 中间层接受数据,并传递给下一层
    在这里插入图片描述
  2. 最后一层使用数据
function UserData({ userData }) {return (<div style={{ display: "grid", gap: "12px" }}><h1>用户数据</h1>

相关文章:

React(二)

文章目录 项目地址七、数据流7.1 子组件传递数据给父组件7.1.1 方式一:給父设置回调函数,传递给子7.1.2 方式二:直接将父的setState传递给子7.2 给props传递jsx7.2.1 方式一:直接传递组件给子类7.2.2 方式二:传递函数给子组件7.3 props类型验证7.4 props的多层传递7.5 cla…...

同步原语(Synchronization Primitives)

同步原语&#xff08;Synchronization Primitives&#xff09;是用于控制并发编程中多个线程或进程之间的访问顺序&#xff0c;确保共享资源的安全访问的一组机制或工具。它们解决了竞争条件&#xff08;Race Condition&#xff09;、死锁&#xff08;Deadlock&#xff09;等并…...

SpringBoot服务多环境配置

一个项目的的环境一般有三个&#xff1a;开发(dev)、测试(test)、生产(proc)&#xff0c;一般对应三套环境&#xff0c;三套配置文件。 像下面这样直接写两个配置文件是不行的。 application.ymlserver:port: 8080application-dev.ymlspring:datasource:driver-class-name: co…...

STM32单片机CAN总线汽车线路通断检测-分享

目录 目录 前言 一、本设计主要实现哪些很“开门”功能&#xff1f; 二、电路设计原理图 1.电路图采用Altium Designer进行设计&#xff1a; 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 随着汽车电子技术的不断发展&#xff0c;车辆通信接口在汽车电子控…...

【环境搭建】使用IDEA远程调试Docker中的Java Web

有时候要对Docker的Java Web远程调试其功能&#xff0c;于是就需要使用IDEA的远程调试功能&#xff0c;记录一下简单配置方法。 以Kylin4.0.0为例&#xff0c;首先拉取镜像并启动容器&#xff1a; $ docker pull apachekylin/apache-kylin-standalone:4.0.0$ docker run -d \-…...

贴代码框架PasteForm特性介绍之select,selects,lselect和reload

简介 PasteForm是贴代码推出的 “新一代CRUD” &#xff0c;基于ABPvNext&#xff0c;目的是通过对Dto的特性的标注&#xff0c;从而实现管理端的统一UI&#xff0c;借助于配套的PasteBuilder代码生成器&#xff0c;你可以快速的为自己的项目构建后台管理端&#xff01;目前管…...

STM32G4的数模转换器(DAC)的应用

目录 概述 1 DAC模块介绍 2 STM32Cube配置参数 2.1 参数配置 2.2 项目架构 3 代码实现 3.1 接口函数 3.2 功能函数 3.3 波形源代码 4 DAC功能测试 4.1 测试方法介绍 4.2 波形测试 概述 本文主要介绍如何使用STM32G4的DAC模块功能&#xff0c;笔者使用STM32Cube工具…...

SpringMVC跨线程获取requests请求对象(子线程共享servletRequestAttributes)和跨线程获取token信息

文章目录 引言I 跨线程共享数据跨线程获取requests请求对象基于org.slf4j.MDC存储共享数据InheritableThreadLocal解决异步线程,无法获取token信息问题II Feign 传递请求属性feign 模块处理被调用方处理请求头III 异步调用的方式CompletableFutureAsync注解Executors引言 本文…...

提取repo的仓库和工作树(无效)

问题 从供应商处获取的.repo的git仓库裸(project-object)仓库和工作树(projects)是分开的。 解决方案 根据工作树的软链接路劲&#xff0c;将工作树合并到project-object下。 import os import shutil import argparse import logging# 设置日志配置 logging.basicConfig(l…...

力扣整理版七:二叉树(待更新)

满二叉树&#xff1a;如果一棵二叉树只有度为0的结点和度为2的结点&#xff0c;并且度为0的结点在同一层上&#xff0c;则这棵二叉树为满二叉树。深度为k&#xff0c;有2^k-1个节点的二叉树。 完全二叉树&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没填满外&am…...

基于单片机的多功能环保宠物窝设计

本设计基于单片机设计的多功能环保宠物窝&#xff0c;利用温湿度传感器、压力传感模块、气味传感模块、红外测温传感器、通信模块、显示模块、清扫部件等&#xff0c;使其能够实现自动检测并调节温湿度、补充宠物食物、检测宠物体温健康并出现异常时进行报警、自动清扫消毒宠物…...

HBase 基础操作

一、启动HBase 首先&#xff0c;确保Hadoop和HBase服务已经启动。如果尚未启动&#xff0c;可以使用以下命令启动&#xff1a; # 启动Hadoop start-all.sh# 启动HBase start-hbase.sh二、HBase Shell操作 创建表 在HBase Shell中&#xff0c;使用create命令创建表。以下是一…...

小米顾此失彼:汽车毛利大增,手机却跌至低谷

科技新知 原创作者丨依蔓 编辑丨蕨影 三年磨一剑的小米汽车毛利率大增&#xff0c;手机业务毛利率却出现下滑景象。 11月18日&#xff0c;小米集团发布 2024年第三季度财报&#xff0c;公司实现营收925.1亿元&#xff0c;同比增长30.5%&#xff0c;预估902.8亿元&#xff1b;…...

PCL 三维重建 a-shape曲面重建算法

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 Concave Hull重建 2.1.2 可视化曲面重建结果 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接: PCL点云算法与项目实战案例汇总(长期更新) 一、概述 …...

【Android】线程池的解析

引言 在Android当中根据用途分为主线程与子线程&#xff0c;主线程当中主要处理与界面相关的操作&#xff0c;子线程主要进行耗时操作。除了Thread本身以外&#xff0c;在Android当中还有很多扮演者线程的角色&#xff0c;比如AsyncTask&#xff08; 底层为线程池&#xff0c;…...

集群聊天服务器(8)用户登录业务

目录 登录状态业务层代码数据模型层代码记录用户的连接信息以及线程安全问题客户端异常退出业务 登录状态 登录且状态变为online 业务层代码 #include "chatservice.hpp" #include "public.hpp" #include <string> #include <muduo/base/Loggi…...

Go语言中的错误嵌套

在Go语言中&#xff0c;错误处理是程序健壮性的关键。Go 1.13版本引入了错误值的嵌套和链式处理&#xff0c;使得错误信息的传递和处理更加灵活和强大。这种机制允许我们在错误中嵌套另一个错误&#xff0c;从而创建一个错误链&#xff0c;这有助于调试和错误跟踪。 错误嵌套的…...

51单片机基础 06 串口通信与串口中断

目录 一、串口通信 二、串口协议 三、原理图 四、串口通信配置参数 1、常用的串行口工作方式1 2、数据发送 3、数据接收 4、波特率计算 5、轮询接收 6、中断接收 一、串口通信 串口通信是一种常见的数据传输方式&#xff0c;广泛用于计算机与外部设备或嵌入式系统之间…...

Elasticsearch:更好的二进制量化(BBQ)对比乘积量化(PQ)

作者&#xff1a;来自 Elastic Benjamin Trent 为什么我们选择花时间研究更好的二进制量化而不是在 Lucene 和 Elasticsearch 中进行生产量化。 我们一直在逐步使 Elasticsearch 和 Lucene 的向量搜索变得更快、更实惠。我们的主要重点不仅是通过 SIMD 提高搜索速度&#xff0…...

【GNU】gcc -g编译选项 -g0 -g1 -g2 -g3 -gdwarf

1、gcc -g的作用 GCC 的 -g 选项用于在编译时生成调试信息&#xff0c;这些信息会嵌入到生成的目标文件或可执行文件中&#xff0c;主要目的是为了支持调试器&#xff08;如 gdb&#xff09;对程序的调试工作。 1.1 生成调试信息 当你在编译代码时使用 -g 选项&#xff0c;GCC…...

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...

内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献

Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译&#xff1a; ### 胃肠道癌症的发病率呈上升趋势&#xff0c;且有年轻化倾向&#xff08;Bray等人&#xff0c;2018&#x…...