【前端】 react项目使用bootstrap、useRef和useState之间的区别和应用
一、场景描述
我想写一个轮播图的程序,只是把bootstrap里面的轮播图拉过来就用上感觉不是很合适,然后我就想自己写自动轮播,因此,这篇文章里面只是自动轮播的部分,没有按键跟自动轮播的衔接部分。
Ps: 本文用的是函数式组件,因为新版本的react函数式组件用的比较多。
二、相关知识
2.1 怎么在react.js中使用bootstrap
首先,在react中引入bootstrap。
npm install bootstrap
然后在index.js中引入bootstrap,在后续组件中使用bootstrap的时候就不需要再引入。
需要同时引入css文件和js文件。
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap";
2.2 useEffect钩子
useEffect钩子是在渲染之后运行的程序。有一个作用是:根据React state控制非React组件。
在部分的内容中有三种写的方式:
useEffect(() => {//代码// eslint-disable-next-line react-hooks/exhaustive-deps}, []); //后面的依赖数据是空的,就是只在第一次渲染的时候运行useEffect(() => {//代码// eslint-disable-next-line react-hooks/exhaustive-deps}); //后面没有依赖,每次渲染的时候都会运行useEffect(() => {//代码// eslint-disable-next-line react-hooks/exhaustive-deps},[img]); //后面的依赖是img就只在img改变的时候再运行
2.3useRef钩子
ref和state之间的区别在于state变化之后组件会重新渲染,ref变化之后组件不会重新渲染。ref在整个组件生命周期内保持不变。
import { useRef } from "react”;let currentIndex1 = useRef(0); //定义ref
//html中代码
<button onClick={() => {console.log(currentIndex1.current);currentIndex1.current = currentIndex1.current + 1;
}}>+1</button>
三、轮播图的自动播放功能实现
这部分分为两个问题,一个是自动播放的index,自动播放就是定时器interval;另一个是通过class类定义当前显示的图片,然后设置动画。
这里定义index只能是state,因为ref变化不会渲染,这样根据index改变的class类可能就改变不了。
思路如下图所示。

整体代码如下:
Recommend.tsx
import { useRef } from "react";
import React, { useEffect, useState } from "react";
import hyRequest from "../../service/index";
const Recommend = function () {const [img, setImg] = useState<any[]>([]);let currentIndex1 = useRef(0);const [currentIndex, setCurrentIndex] = useState(0);useEffect(() => {hyRequest.get({ url: "/banner" }).then((res) => {console.log(res);setImg(res.banners);console.log(img);});// eslint-disable-next-line react-hooks/exhaustive-deps}, []);useEffect(() => {console.log("设置定时器");const interval = setInterval(() => {//console.log(img, img.length);//currentIndex.current = (currentIndex.current + 1) % img.length;//console.log(currentIndex.current);setCurrentIndex((preCurrentIndex) => (preCurrentIndex + 1) % img.length);}, 3000);return () => clearInterval(interval); // 清除定时器// eslint-disable-next-line react-hooks/exhaustive-deps}, [img]);return (<div><h2>推荐</h2><div id="carouselExample" className="carousel slide"><div className="carousel-inner">{img.map((item, index) => {//console.log(currentIndex, item, index);return (<divkey={index}className={`carousel-item ${index === currentIndex ? "active" : ""} ${index === currentIndex - 1 ? "preActive" : ""} ${index === currentIndex + 1 ? "nextActive" : ""}`}><img src={item.imageUrl} className="d-block w-100" alt="..." /></div>);})}</div><buttonclassName="carousel-control-prev"type="button"data-bs-target="#carouselExample"data-bs-slide="prev"><spanclassName="carousel-control-prev-icon"aria-hidden="true"></span><span className="visually-hidden">Previous</span></button><buttonclassName="carousel-control-next"type="button"data-bs-target="#carouselExample"data-bs-slide="next"><spanclassName="carousel-control-next-icon"aria-hidden="true"></span><span className="visually-hidden">Next</span></button></div><div>{currentIndex1.current}</div><buttononClick={() => {console.log(currentIndex1.current);currentIndex1.current = currentIndex1.current + 1;}}>+1</button></div>);
};export default Recommend;
index.less
.nextActive {display: block !important;transform: translateX(100%);opacity: 0;
}
.active {transform: none;opacity: 1;
}
.preActive {display: block !important;transform: translateX(-100%);opacity: 0;
}
相关文章:
【前端】 react项目使用bootstrap、useRef和useState之间的区别和应用
一、场景描述 我想写一个轮播图的程序,只是把bootstrap里面的轮播图拉过来就用上感觉不是很合适,然后我就想自己写自动轮播,因此,这篇文章里面只是自动轮播的部分,没有按键跟自动轮播的衔接部分。 Ps: 本文用的是函数…...
联想电脑如何进入BIOS?
打开设置 下滑找到更新与安全 点击恢复和立即重新启动 选择疑难解答 选择UEFI固件设置 然后如果有重启点击重启 重启开机时一直点击FNF10进入BIOS界面...
蓝桥杯单片机大模板(西风)
#include <REGX52.H> #include "Key.h" #include "Seg.h" //变量声明区 unsigned char Key_Val,Key_Down,Key_Old;//按键扫描专用变量 unsigned char Key_Slow_Down;//按键减速专用变量 10ms unsigned int Seg_Slow_Down;//按键扫描专用变量 500ms …...
20250213刷机飞凌的OK3588-C_Linux5.10.209+Qt5.15.10_用户资料_R1
20250213刷机飞凌的OK3588-C_Linux5.10.209Qt5.15.10_用户资料_R1 2025/2/13 15:10 缘起:OK3588-C_Linux5.10.66Qt5.15.2的R5都出来了。但是公司一直在R4上面开发的,不想动了。 不过我的原则,只要是有新的系统SDK/BSP放出来,都先在…...
2.13学习记录
web ezSSTI 根据题意,这题考察ssti漏洞,查询有关信息得知这是一种模版攻击漏洞。这种题目可以利用工具进行解决,用焚靖,这是一个针对CTF比赛中Jinja SSTI绕过WAF的全自动脚本 根据教程安装工具和对应的依赖就可以了这个脚本会自…...
【DeepSeek】Deepseek辅组编程-通过卫星轨道计算终端距离、相对速度和多普勒频移
引言 笔者在前面的文章中,介绍了基于卫星轨道参数如何计算终端和卫星的距离,相对速度和多普勒频移。 【一文读懂】卫星轨道的轨道参数(六根数)和位置速度矢量转换及其在终端距离、相对速度和多普勒频移计算中的应用 Matlab程序 …...
JavaEE架构
一.架构选型 1.VM架构 VM架构通常指的是虚拟机(Virtual Machine)的架构。虚拟机是一种软件实现的计算机系统,它模拟了物理计算机的功能,允许在单一物理硬件上运行多个操作系统实例。虚拟机架构主要包括以下几个关键组件ÿ…...
Docker 网络的几种常见类型
目录 Docker 网络类型 桥接网络(Bridge) 通俗解释 特点 使用场景 示例 主机网络(Host) 通俗解释 特点 使用场景 示例 None 网络 通俗解释 特点 使用场景 示例 Overlay 网络 通俗解释 特点 使用场景 示例 Ma…...
C++ 常用的设计模式
1:单例模式:首先能想到的,最为重要的一个设计模式。确保一个类仅有一个实例,提供一个 全局访问点,惯用做法是屏蔽构造数访问(设为private),通过static 权限达到间接访问调用的目的…...
【设计模式】01- 一文理解常用设计模式-“创建型模式”篇
一、前言 最近在复习设计模式,撰写、整理了内容和代码片段,和大家一起交流学习。 设计模式是软件设计中常见问题的典型解决方案。 修改记录 更新内容更新时间第一版 250212 更新了对文章中的模式代码示范的解释250214 二、模式分类 模式可以根据其意图…...
在ArcGIS JS API中使用WebGL实现波纹扩散特效
在现代WebGIS开发中,ArcGIS JS API 是一个非常强大的工具,它允许开发者创建丰富的地理信息应用。结合WebGL技术,我们可以实现更加复杂和炫酷的可视化效果。本文将介绍如何使用ArcGIS JS API结合WebGL实现一个波纹扩散特效。 波纹扩散效果 1 概…...
我用AI做数据分析之四种堆叠聚合模型的比较
我用AI做数据分析之四种堆叠聚合模型的比较 这里AI数据分析不仅仅是指AI生成代码的能力,我想是测试AI数据分析方面的四个能力,理解人类指令的能力、撰写代码的能力、执行代码的能力和解释结果的能力。如果这四个能力都达到了相当的水准,才可…...
《LSTM与HMM:序列建模领域的双雄对决》
在序列建模的广阔领域中,长短期记忆网络(LSTM)和隐马尔可夫模型(HMM)都是极为重要的工具,它们各自有着独特的优势和应用场景。下面将对两者在序列建模上的异同进行深入探讨。 相同点 序列数据处理能力&…...
Flutter 的 Widget Key 提议大调整?深入聊一聊 Key 的作用
Flutter 的 Widget Key 提议大调整?深入聊一聊 Key 的作用 在 Flutter 里,Key 对象存在的目的主要是区分和维持 Widget 的状态,它是控件在渲染树里的「复用」标识之一,这一点在之前的《深入 Flutter 和 Compose 在 UI 渲染刷新时…...
只需三步!5分钟本地部署deep seek——MAC环境
MAC本地部署deep seek 第一步:下载Ollama第二步:下载deepseek-r1模型第三步:安装谷歌浏览器插件 第一步:下载Ollama 打开此网址:https://ollama.com/,点击下载即可,如果网络比较慢可使用文末百度网盘链接 注:Ollama是…...
网络工程师 (31)VLAN
前言 VLAN(Virtual Local Area Network)即虚拟局域网,是一种将物理局域网划分成多个逻辑上独立的虚拟网络的技术。 一、定义与特点 定义:VLAN是对连接到的第二层交换机端口的网络用户的逻辑分段,不受网络用户的物理位置…...
浏览器网络请求全流程深度解析
一、核心流程概述 现代浏览器的网络请求过程是一个分层协作的精密系统,涉及应用层协议、传输层协议、操作系统内核及网络基础设施的协同工作。整个过程可抽象为以下关键阶段: 请求构建与初始化DNS解析与寻址TCP连接建立HTTP协议交互响应处理与资源解析…...
React历代主要更新
一、React 16之前更新 React Fiber是16版本之后的一种更新机制,使用链表取代了树,是一种fiber数据结构,其有三个指针,分别指向了父节点、子节点、兄弟节点,当中断的时候会记录下当前的节点,然后继续更新&a…...
【数据结构】(8) 二叉树
一、树形结构 1、什么是树形结构 根节点没有前驱,其它节点只有一个前驱(双亲/父结点)。所有节点可以有 0 ~ 多个后继,即分支(孩子结点)。每个结点作为子树的根节点,这些子树互不相交。 2、关于…...
navicat导出表结构到Excel 带字段备注
navicat导出表结构到Excel 带字段备注 SELECTCOLUMN_NAME AS 字段名称,COLUMN_TYPE AS 字段类型, IF( IS_NULLABLE NO, 否, 是 ) AS 是否必填,COLUMN_COMMENT AS 注释 FROMINFORMATION_SCHEMA.COLUMNS WHERE -- 数据库名table_schema vmscenter -- 表名AND table_name y…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
LeetCode - 199. 二叉树的右视图
题目 199. 二叉树的右视图 - 力扣(LeetCode) 思路 右视图是指从树的右侧看,对于每一层,只能看到该层最右边的节点。实现思路是: 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...
windows系统MySQL安装文档
概览:本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容,为学习者提供全面的操作指导。关键要点包括: 解压 :下载完成后解压压缩包,得到MySQL 8.…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息:libc.so.6: cannot open shared object file: No such file or directory: #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
Linux 下 DMA 内存映射浅析
序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存,但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程,可以参考这篇文章,我觉得写的非常…...
鸿蒙HarmonyOS 5军旗小游戏实现指南
1. 项目概述 本军旗小游戏基于鸿蒙HarmonyOS 5开发,采用DevEco Studio实现,包含完整的游戏逻辑和UI界面。 2. 项目结构 /src/main/java/com/example/militarychess/├── MainAbilitySlice.java // 主界面├── GameView.java // 游戏核…...
门静脉高压——表现
一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构:由肠系膜上静脉和脾静脉汇合构成,是肝脏血液供应的主要来源。淤血后果:门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血,引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...
