当前位置: 首页 > 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…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...