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

react经验4:动态组件

什么是动态组件?

在页面的一小块区域切换显示不同的组件

实现方法

1.声明示例组件

//写在component1.tsx中
const Component1=()=>{return (<div>组件1</div>)
}
//写在component2.tsx中
const Component2=()=>{return (<div>组件2</div>)
}

2.准备好动态组件

import { lazy } from "react"
const Component1=lazy(()=>import('./component1.tsx'))
const Component2=lazy(()=>import('./component2.tsx'))

3.应用动态组件

import { useState,Suspense } from "react"
const [viewMode,setViewMode]=useState(1)
function switchView(mode:number){setViewMode(mode)
}
<div>动态组件示范<button onClick={()=>switchView(1)}>切换1号组件</button><button onClick={()=>switchView(2)}>切换2号组件</button><Suspense fallback={<div>组件加载中,请稍等</div>}>{viewMode===1&&<Component1/>}{viewMode===2&&<Component2/>}</Suspense>
</div>

相关文章:

react经验4:动态组件

什么是动态组件&#xff1f; 在页面的一小块区域切换显示不同的组件 实现方法 1.声明示例组件 //写在component1.tsx中 const Component1()>{return (<div>组件1</div>) } //写在component2.tsx中 const Component2()>{return (<div>组件2</div…...

Java maven的下载解压配置(保姆级教学)

mamen基本概念 Maven项目对象模型(POM)&#xff0c;可以通过一小段描述信息来管理项目的构建&#xff0c;报告和文档的项目管理工具软件。 Maven 除了以程序构建能力为特色之外&#xff0c;还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性&#xff0c;所以…...

Java课题笔记~数据库连接池

一、数据库连接池 1.1 数据库连接池简介 数据库连接池是个容器&#xff0c;负责分配、管理数据库连接(Connection) 它允许应用程序重复使用一个现有的数据库连接&#xff0c;而不是再重新建立一个&#xff1b; 释放空闲时间超过最大空闲时间的数据库连接来避免因为没有释放数…...

设计模式-单例模式

文章目录 单例模式饿汉式单例懒汉式单例懒汉式加锁单例双重锁校验单例静态内部类单例枚举单例 单例模式 单例模式主要是确保一个类在任何情况下都只有一个实例&#xff0c;并提供一个全局访问的点。 主要有以下几种 饿汉式单例 /*** 饿汉式* 类加载到内存后&#xff0c;就实…...

golang mysql

驱动 "github.com/go-sql-driver/mysql"使用到的方法 func sql.Open(driverName string, dataSourceName string) (*sql.DB, error) func (*sql.DB).Prepare(query string) (*sql.Stmt, error)//使用DB.Prepare预编译并使用参数化查询&#xff0c;对预编译的SQL语句…...

uniapp使用echarts

uniapp使用echarts 1.下载资源包2.引入资源包3.代码示例注意事项 1.下载资源包 https://echarts.apache.org/zh/download.html 2.引入资源包 将资源包放入项目内 3.代码示例 <template><div style"width:100%;height:500rpx" id"line" ref&…...

Python命令模式介绍、使用

一、Python命令模式介绍 Python命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许将请求或操作封装在对象中&#xff0c;并将其作为参数传递给调用对象&#xff0c;以在不同的环境中执行相同的请求或操作。 功能&#xff1a; 将请求或…...

#typescript 使用file-saver模块#

场景&#xff1a;前端使用file-saver模块做导出文档的时候&#xff0c;出现两个错误 1&#xff1a;npm run build 提示找不到模块&#xff0c;如图 解决方法&#xff1a; 先卸载&#xff0c;不管是否安装都先要卸载 ,然后安装&#xff1a; npm uninstall file-saver npm…...

移动端适配布局rem和vw

在日益发展的移动互联网时代&#xff0c;作为前端开发者&#xff0c;我们必须了解和掌握各种移动端显示效果的适配技术。在众多适配方案中&#xff0c;使用rem和vw进行布局是当前最为流行和普遍使用的两种技术。通过合理运用这两种技术&#xff0c;我们可以让我们的网页在不同尺…...

【Java基础教程】(四十八)集合体系篇 · 上:全面解析 Collection、List、Set常用子接口及集合元素迭代遍历方式~【文末送书】

Java基础教程之集合体系 上 &#x1f539;本章学习目标1️⃣ 类集框架介绍2️⃣ 单列集合顶层接口&#xff1a;Collection3️⃣ List 子接口3.1 ArrayList 类&#x1f50d; 数组&#xff08;Array&#xff09;与列表&#xff08;ArrayList&#xff09;有什么区别?3.2 LinkedL…...

什么是 DNS ANAME 解析?

本人使用谷歌搜索了简中互联网&#xff0c;完全没有找到任何有关 ANAME 的文章……本文该不会是头一份吧 相信大家对于 DNS 的解析方式都不陌生&#xff0c;常见的有 A、CNAME、MX、TXT 记录等等。其中&#xff0c;网站常用的是 A 记录和 CNAME 记录&#xff1a;A 记录用于将域…...

Neo4j 集群和负载均衡

Neo4j 集群和负载均衡 Neo4j是当前最流行的开源图DB。刚好读到了Neo4j的集群和负载均衡策略&#xff0c;记录一下。 1 集群 Neo4j 集群使用主从复制实现高可用性和水平读扩展。 1.1 复制 集群的写入都通过主节点协调完成的&#xff0c;数据先写入主机&#xff0c;再同步到…...

go web框架 gin-gonic源码解读01————Engine

go web框架 gin-gonic源码解读01————Engine gin-gonic是go语言开发的轻量级web框架&#xff0c;性能优异&#xff0c;代码简洁&#xff0c;功能强大。有很多值得学习的地方,最近准备把这段时间学习gin的知识点&#xff0c;通过engine&#xff0c;context&#xff0c;router…...

windows版docker部署springcloud项目

材料&#xff1a; 1.windows版docker环境&#xff08;其他版教程可能道理一样但是比如文件后坠名上可能有差异&#xff09; 2.运行好的数据库容器&#xff08;实现教程&#xff09; 3.所有jar包 实现&#xff1a; 最后整好的文件夹结构图&#xff08;原工程文件机密&#xf…...

探索工程机械远程控制新纪元:Intewell-Hyper II震撼发布!

在当前的工程技术领域&#xff0c;远程控制技术以其卓越的效率和方便性&#xff0c;正受到越来越多的关注和运用。而在这个过程中&#xff0c;某机械集团以Intewell-HyperII操作系统为基础&#xff0c;打造出了具有前瞻性的工程机械远程控制器&#xff0c;为行业的发展提供了新…...

DM8 DSC集群实时主备搭建

1、环境准备 主库DSC集群公网ip&#xff1a;192.168.1.34/35 私有ip&#xff1a;192.168.10.134/135 备库ip&#xff1a;192.168.1.33 2、对DSC集群数据库全备 1)主库做全备 [dmdbadmdsc01 bin]$ disql sysdba/dameng123 BACKUP DATABASE TO WEEKLY_FULL_BAK BACKUPSE…...

配置IPv4 over IPv6隧道示例

IPv4 over IPv6隧道&#xff1a; 在IPv4 Internet向IPv6 Internet过渡后期&#xff0c;IPv6网络被大量部署后&#xff0c;而IPv4网络只是散布在世界各地的一些孤岛。利用隧道技术可以在IPv6网络上创建隧道&#xff0c;从而实现IPv4孤岛的互联&#xff0c;IPv4孤岛能通过IPv6公…...

在中国区部署日志通2.0

前提条件 一个域名&#xff1a;使用此域名来访问日志通控制台提供aws iam 的ssl证书 &#xff0c;而且必须跟域名相关联具有四个子网&#xff08;两个公有子网和两个私有子网&#xff09;和NAT网关的VPC 步骤 1.创建ACM证书 1.1 请求公有证书 1.2 配置域名 1.3 新申请的证书记…...

centos下安装jdk

环境:centos7/openjdk-8u40-b25 openJDK页面 java二进制包下载页面 华为jdk镜像 1.下载安装包后上传到服务器上&#xff0c;运行命令解压到/opt/目录下 tar cxvf server-jre-8u271-linux-x64.tar.gz -C /opt/2.配置环境变量 vi /etc/profile source /etc/profile添加下面的…...

【HDFS】LocatedBlocks、LocatedBlock、LocatedStripedBlock、ExtendedBlock类分析

本文主要介绍如下内容: 1、 介绍标题中类的功能及相关字段 2、 与字段初始化相关的一些细节 一、ExtendedBlock类 在Block Pools之间唯一标识一个块。 直白点就是一个Block再加一个块池id。 块池的概念是HDFS联邦集群之后产生的,因为一台DataNode的主机可以作为多个HDFS集群…...

FPGA实战:手把手教你用Verilog给NAND Flash数据上把“安全锁”(附完整ECC代码)

FPGA实战&#xff1a;用Verilog为NAND Flash打造硬件级ECC防护系统 1. 为什么你的NAND Flash需要硬件ECC&#xff1f; NAND Flash存储芯片在工业控制、物联网终端和边缘计算设备中扮演着关键角色&#xff0c;但它的物理特性导致数据可靠性存在先天缺陷。想象一下&#xff0c;当…...

Qwen3.5-2B效果展示:儿童绘本图→识别角色/场景/情绪→生成故事续写+朗读脚本

Qwen3.5-2B效果展示&#xff1a;儿童绘本图→识别角色/场景/情绪→生成故事续写朗读脚本 1. 模型介绍 Qwen3.5-2B是通义千问团队推出的轻量化多模态基础模型&#xff0c;属于Qwen3.5系列的小参数版本&#xff08;20亿参数&#xff09;。这个模型特别适合在资源有限的设备上部…...

YOLOFuse实战案例:如何利用红外+RGB融合提升森林火情监测精度

YOLOFuse实战案例&#xff1a;如何利用红外RGB融合提升森林火情监测精度 1. 森林火情监测的痛点与挑战 森林火灾是全球性的生态灾难&#xff0c;每年造成巨大经济损失和生态破坏。传统监测手段主要依赖可见光摄像头和人工巡查&#xff0c;存在明显局限性&#xff1a; 夜间失…...

公交客流统计摄像机系统,能替代监控摄像头吗?

公交车内乘客流量大&#xff0c;安全隐患较多&#xff0c;多年来监控摄像头已经成为车内的标配。随着科技技术的进步&#xff0c;如今公交客流统计摄像机系统&#xff0c;也逐渐部署到了各地公交上。那么公交客流统计摄像机系统&#xff0c;能替代监控摄像头吗&#xff1f;如今…...

OffscreenCanvas黑科技:让你的网页动画性能提升300%的配置指南

OffscreenCanvas黑科技&#xff1a;让你的网页动画性能提升300%的配置指南 当网页动画开始卡顿&#xff0c;用户的体验就会直线下降。传统Canvas渲染在主线程执行&#xff0c;复杂的图形运算很容易阻塞UI响应。OffscreenCanvas的出现彻底改变了这一局面——它允许你将绘制逻辑转…...

Pixie微型LED链式显示模块技术解析与嵌入式驱动开发

1. Pixie显示模块技术解析与嵌入式驱动开发指南Pixie 是一款面向嵌入式系统的链式可扩展微型LED点阵显示模块&#xff0c;由Lixie Labs LLC&#xff08;Connor Nishijima&#xff09;设计并开源。其核心价值在于以极小物理尺寸&#xff08;20.6mm 34.7mm&#xff09;集成双57共…...

智能转换驱动科研效率:DeTikZify重构学术图表自动化新范式

智能转换驱动科研效率&#xff1a;DeTikZify重构学术图表自动化新范式 【免费下载链接】DeTikZify Synthesizing Graphics Programs for Scientific Figures and Sketches with TikZ 项目地址: https://gitcode.com/gh_mirrors/de/DeTikZify 在科研成果可视化的关键环节…...

私域数据安全与合规——企微引流必须注意的5个技术红线

做公域引流到企微&#xff0c;数据安全和合规是技术团队必须重视的问题。一旦踩红线&#xff0c;轻则功能受限&#xff0c;重则企微封禁甚至法律风险。今天梳理5个技术红线及应对方案。红线1&#xff1a;用户隐私数据存储企微API返回的用户信息包含ExternalUserID&#xff08;外…...

2026全年求职时间线|应届生必看,错过可能再等一年

关注 霍格沃兹测试学院公众号&#xff0c;回复「资料」, 领取人工智能测试开发技术合集如果你是2026届、2027届毕业生&#xff0c;这篇文章建议收藏转发。应届生身份只有一次&#xff0c;用好了是红利&#xff0c;用错了可能错过一整年机会。都说今年工作难找&#xff0c;那我们…...

2026年黄山钢筋网片供应厂家揭秘

在建筑行业蓬勃发展的今天&#xff0c;钢筋网片作为建筑施工中不可或缺的材料&#xff0c;其质量和供应厂家的选择至关重要。对于黄山地区的建筑项目来说&#xff0c;找到一家靠谱的钢筋网片供应厂家&#xff0c;是保障工程质量和进度的关键。今天&#xff0c;我们就来揭秘一家…...