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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/39682.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue-element-admin解决跨域问题

更改vue.config.js publicPath: process.env.NODE_ENV production ? /tyzfadmin : /,//开发和生产环境不一样,做个判断 outputDir: dist, assetsDir: static, lintOnSave: false, runtimeCompiler: true, productionSourceMap: false, devServer: {port: port,op…

暴雪娱乐遭DDoS攻击,《暗黑破坏神》等多款游戏受影响

6月25日上午11点,有游戏玩家反应Blizzard Battle.net无法登入、连线缓慢及网站问题,暴雪也证实其电玩平台遭到DDoS攻击。 暴雪娱乐的 Battle.net在线服务遭到分布式拒绝服务(DDoS)攻击,导致玩家无法正常登录游戏或游戏…

虚幻Voxel插件

虚幻Voxel插件 Voxel Plugin Voxel Plugin brings smoothed voxel terrain to Unreal Engine 4. Generate, destroy and terraform the world! 体素插件可以在虚幻引擎中生成平滑的体素地形。创造、破环和改造世界。 Terrain generation and terraforming both in game and i…

MFC第十八天 非模式对话框、对话框颜色管理、记事本项目(查找替换、文字和背景色、Goto(转到)功能的开发)

文章目录 非模式对话框非模式对话框的特点非模式对话框与QQ聊天窗口开发非模态对话框(Modeless Dialog)和模态对话框(Modal Dialog)区别 记事本开发CFindReplaceDialog类的成员查找替换(算法分析)使用RichEdit控件 开发Goto(转到)…

Minecraft 1.20.x Forge模组开发 01.Idea开发环境配置

我们本次来进行Minecraft 1.20.x 模组开发环境配置教程的介绍。 效果演示 效果演示 效果演示 1.首先我们需要下载Java17和1.20模组开发包: Java17下载官网

ylb-项目简介

1、各模块服务功能 注&#xff1a;其部分实体类、接口、mapper文件由MyBatis逆向工程生成。 2、Maven管理&#xff08;多模块&#xff0c;继承和聚合&#xff09; 2.1 parent模块 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"…

Prometheus、Grafana使用

文章目录 系统性能监控相关命令lscputopfreehtopdstatglancesiftopiptrafnethogs 监控软件Prometheus安装、使用将promethues做成服务监控其他机器 exportergrafana配置、使用密码忘记重置 系统性能监控 相关命令 lscpu lscpu 是一个 Linux 命令&#xff0c;用于显示关于 CP…

计算机网络基础-OSI七层模型 和 TCP/IP四层模型的对比

OSI七层模型 和 TCP/IP四层模型的对比 OSI七层模型&#xff1a; 理论上的网络通信模型 记忆&#xff1a; (物、链、网、输、会、示、用) TCP/IP四层模型&#xff1a; 实际上的网络通信标准 (1) 七层网络体系结构各层的主要功能&#xff1a; 应用层&#xff1a; 最上层的&am…

Spring学习记录---回顾反射机制

目录 10.回顾反射机制 10.1 分析方法四要素 //不使用反射机制调用这些方法 使用反射机制调用方法 代码&#xff1a; 运行结果&#xff1a; 10.4 假设你知道属性名 测试代码 运行结果 10.回顾反射机制 10.1 分析方法四要素 package com.dong.reflect;public class Som…

JMETERbeanshell多种姿势获取目标值

beanshell通过vars方式取值 JMETER三种取值方法步骤_securitor的博客-CSDN博客 beanshell通过props方式取值 JMETER取值二_securitor的博客-CSDN博客 beanshell通过source方式取值 JMETER取值三_securitor的博客-CSDN博客 beanshell通过jar包方式取值 JMETER取值四_securitor的…

在UI中使用SpriteMask裁减任意shader的粒子效果

前言 由于我们需要在Mask中对粒子效果进行裁减。但是我们的的特效同事不愿意每个shader都去添加Stencil。所以使用SpriteMask方式进行裁减。 使用步骤 1. 添加SpriteMask Component 更具你需要的Mask形状设置精灵图片。又因为实际是精灵&#xff0c;并不属于UI系统&#xff…

【react + antd】antd如何自定义请求使用antd的upload组件实现图片上传且可预览可删除

文章目录 1. 效果展示2. customRequest如何使用&#xff1f;特别注意&#xff1a; 3. 控制上传时什么时候使用customRequest&#xff0c;什么时候选择beforeUpload方法&#xff1f; 1. 效果展示 官网给出的案例无法使用封装好的请求方式上传图片&#xff0c;以及无法满足上传图…

Spring Cloud Alibaba【Nacos配置动态刷新、Nacos集群架构介绍 、Nacos的数据持久化、认识分布式流量防护 】(五)

目录 分布式配置中心_Nacos配置动态刷新 分布式配置中心_Dubbo服务对接分布式配置中心 分布式配置中心_Nacos集群架构介绍 分布式配置中心_Nacos的数据持久化 分布式配置中心_Nacos集群配置 分布式流量防护_认识分布式流量防护 分布式流量防护_认识Sentinel 分布式配置…

每天一道大厂SQL题【Day27】脉脉真题实战(三)连续两天活跃用户

文章目录 每天一道大厂SQL题【Day27】脉脉真题实战(三)连续两天活跃用户每日语录第26题 中级题: 活跃时长的均值1. 需求列表思路分析 答案获取加技术群讨论附表文末SQL小技巧 后记 每天一道大厂SQL题【Day27】脉脉真题实战(三)连续两天活跃用户 大家好&#xff0c;我是Maynor。…

计组4——总线Plus IO

(CPU外部的)总线 用于连接computer3大模块(MC/GPUIO) CPU内部的片内总线判优由时序逻辑实现 composition& priority-judging 通信方式 CPU内部的片内总线用于取指、译码、执行、中断的数据通信&#xff1b; IO 总线分为控制线、数据线和地址线&#xff0c;对IO设备的…

python开发项目基于语音识别的智能垃圾分类系统的设计与实现

博主介绍&#xff1a;擅长Java、微信小程序、Python、Android等&#xff0c;专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3fb; 不然下次找不到哟 Java项目精品实战案例…

基于Java+SpringBoot+Vue+Uniapp前后端分离考试学习一体机设计与实现(视频讲解,已发布上线)

博主介绍&#xff1a;✌全网粉丝3W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

mysql、redis 、RabbitMQ只能本机访问,怎么改?

如果只能本机访问&#xff0c;怎么改? 一、mysql - 改my.ini 刷脚本 bind-address0.0.0.0 然后重启一下mysql服务 任务管理器-关掉mysql 搜索 计算机管理-重启mysql服务 然后 打开查询&#xff0c;并选择mysql数据&#xff0c;输入这个sql语句&#xff0c;点击运行 sele…

状态模式:游戏、工作流引擎中常用的状态机是如何实现的?

从今天起&#xff0c;我们开始学习状态模式。在实际的软件开发中&#xff0c;状态模式并不是很常用&#xff0c;但是在能够用到的场景里&#xff0c;它可以发挥很大的作用。从这一点上来看&#xff0c;它有点像我们之前讲到的组合模式。 可以简短的回顾一下组合模式&#xff1a…

基于深度学习的高精度道路瑕疵检测系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度道路瑕疵&#xff08;裂纹&#xff08;Crack&#xff09;、检查井&#xff08;Manhole&#xff09;、网&#xff08;Net&#xff09;、裂纹块&#xff08;Patch-Crack&#xff09;、网块&#xff08;Patch-Net&#xff09;、坑洼块&#x…