学习react,复制一个civitai-更新2

更新内容

耗时一个礼拜左右,增加了个新界面:模型图片详情界面。

看看效果图吧:

功能介绍

操作:在模型详情界面点击一个图片,就能到图片详情界面

复制代码
1.点击哪个图片,就会展示哪个,同时还会更新图标的下标。
2. 右上角有个X,点击就能关闭
3. 键盘ESC键,也能关闭图片详情界面
4. 点击左右图标会更新路由的imageID
5. 如果有prompts,在右下角可以复制prompts到stable diffusion

总的来说,跟Civitai官网是一样的操作,只不过数据没人家的丰富。

React 知识点

返回back上一个界面

复制代码
# 导入 钩子useNavigate
import {useNavigate } from 'react-router-dom';
# 使用
const nav = useNavigate()
# 返回上一级,传一个-1就能返回
const close = ()=> nav(-1)

监听键盘ESC,用户按下,关闭界面

复制代码
# 导入useHotkeys钩子
import { useHotkeys } from '@mantine/hooks';
# 使用,close是一个关闭方法
useHotkeys([['Escape', close]]);

更新路由参数imageID

复制代码
# 主要用到 useSearchParams 这个钩子
const [searchParams,setSearchParams] = useSearchParams()
# 更新路由参数的时候,注意设置replace:true
setSearchParams({imageID: 123},{replace: true})
# 如果更新路由再传递参数
setSearchParams({imageID: 123},{replace: true,state:myparams})
# 接收state参数,可以直接用useLocation钩子
const locat = useLocation()
const state = locat.state

总结

虽然只是一个简单的界面,但是要实现里面的功能,还是要学习很多react钩子,路漫漫其修远兮,还要继续努力学习react!

相关推荐
Southern Wind3 分钟前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao24 分钟前
Rspack 原理:webpack,我为什么不要你
前端
yinuo28 分钟前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽30 分钟前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户984022766791830 分钟前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔30 分钟前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖32 分钟前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮37 分钟前
从0到1搭一个monorepo项目(一)
前端·javascript·git
m0_7414122442 分钟前
大文件上传与文件下载
前端
wu_jing_sheng042 分钟前
Python中使用HTTP 206状态码实现大文件下载的完整指南
开发语言·前端·python