学习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!

相关推荐
北海道浪子3 分钟前
[免费送$1000]ClaudeCode、Codex等AI模型在开发中的使用
前端·人工智能·后端
明月与玄武8 分钟前
2025 前端框架决战:Vue 与 React 分析优缺点及使用场景!
前端·vue.js·react.js
无盐海24 分钟前
XSS漏洞攻击 (跨站脚本攻击)
前端·xss
不一样的少年_29 分钟前
1024程序员节:用不到100行代码做个“代码雨屏保”装X神器(附源码)
前端·javascript·浏览器
阿奇__34 分钟前
el-table默认排序设置
前端·javascript·vue.js
hongc9340 分钟前
element-ui el-table 设置固定列fixed 高度不对
前端·vue.js·elementui
Forfun_tt1 小时前
xss-labs pass-12
前端·xss
云枫晖1 小时前
Webpack系列-编译过程
前端·webpack
AskHarries1 小时前
Toolhub — 一个干净实用的在线工具集合
前端·后端
H尗2 小时前
Vue3响应式系统的精妙设计:深入理解 depsLength 与 trackId 的协同艺术
前端·vue.js