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

news2024/11/17 16:15:45

更新内容

耗时一个礼拜左右,增加了个新界面:模型图片详情界面。
看看效果图吧:
在这里插入图片描述

在这里插入图片描述

功能介绍

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

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!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【C++】面试基础搬运

c/c c三大特性 封装 最开始接触代码是C语言,那么开始写一些逻辑代码的时候会很麻烦,因为你要在函数中定义变量,然后按顺序写对应的逻辑,接着可以将逻辑封装成函数。当时会感觉很麻烦,因为很散装,知道后面…

docker-compose 常用命令(附 docker-compose 的安装教程)

本文目录 1. docker-compose 介绍1. docker-compose 简介2. docker-compose 安装3. docker-compose 卸载 2. docker-compose 常用命令1. docker-compose 命令格式2. docker-compose up3. docker-compose ps4. docker-compose stop5. docker-compose down6. docker-compose logs…

虚幻引擎程序化资源生成框架PCG 之Gather(收集)、Merge(合并)、Union(并集)

有朋友询问:Gather(收集)、Merge(合并)、Union(并集)这三个运算节点,看名字有些相似,究竟区别是什么?目前还没有详细的官方文档,所以今天老王结合…

电脑城逐渐衰退甚至消失,究竟是好是坏呢?

在过去很长一段时间里,想要购买电子设备都逃不开一个叫“电脑城”的地方,那里鱼龙混杂良莠不齐,是令许多人记忆深刻分外难忘之处。但是随着时代发展电商兴起,采用传统线下销售的电脑城却逐渐衰退甚至面临消失。 电脑城曾经是很多…

【2】Spring手写模拟-依赖注入、初始化、AOP

首先回顾一下我们之前的流程ApplicationContext 构造方法 获取Spring配置类ComponetScan 注解,扫描包,获取其路径及其对应的字节码文件逐个扫描字节码文件 利用字节码文件获取类,查看是否包含Componet 注解,并获取或者生成BeanNa…

vv、vt 埋点上报自动化文档

vv、vt 埋点自动化文档 文章目录 vv、vt 埋点自动化文档一、项目简介二、环境搭建Airtest官方参考文档AirtestIDE下载Python环境安装Airtest安装安卓环境IOS 环境iOS-Tagent 编译 设置代理 三、框架介绍四、实现原理4.1 框架流程图4.2 初始化配置4.2.1 读取mock server配置&…

sqli-labs

目录 Less1 首先来爆字段 联合注入 判断注入点 爆数据库名 爆破表名 information_schema information_schmea.tables group_concat() 爆破列名 information_schema.columns 爆值 SQLMAP 主要对sqli-labs 的深入学习 Less1 我们先看看源代码 <?php //includ…

山西电力市场日前价格预测【2023-07-16】

日前价格预测 预测明日&#xff08;2023-07-16&#xff09;山西电力市场全天平均日前电价为395.36元/MWh。其中&#xff0c;最高日前电价为510.19元/MWh&#xff0c;预计出现在20: 00。最低日前电价为309.52元/MWh&#xff0c;预计出现在13: 15。 价差方向预测 1&#xff1a;实…

如何从零开始搭建公司自动化测试框架?

搭建的自动化测试框架要包括API测试&#xff0c;UI测试&#xff0c;APP测试三类。以上三类其实可以简化为两类&#xff0c;那就是&#xff1a; 1&#xff09;接口自动化测试框架搭建 2&#xff09;UI自动化测试框架搭建。 没问题&#xff0c;安排&#xff0c;且是手把手教你如何…

Next.js框架入门笔记

内置组件 ‘pages/_document.js’ 文件&#xff0c;自定义document DOC&#xff1a; https://www.nextjs.cn/docs/advanced-features/custom-document <Head>组件 <Head>是一个内置在 Next.js 中的 React 组件。它允许您修改页面的<head>。 Docs: https:/…

JVM理论(四)运行时数据区--堆/方法区

堆(heap) 堆内存逻辑上分为三部分 一个JVM实例只存在一个堆内存,JVM启动时创建堆区&#xff0c;通常情况下也是最大的内存空间&#xff0c;几乎所有的对象实例都要在堆中分配内存&#xff0c;所以堆也是垃圾回收的重点区域堆是被所有线程共享的,在堆里面也可以划分线程私有的缓…

肝!熬夜到天明,阿里顶配级 Spring Security 笔记

Spring Security Spring Security 是一个能够为基于 Spring 的企业应用系统提供声明式的安全访问控制解决方案的安全框架。由于它是 Spring 生态系统中的一员&#xff0c;因此它伴随着整个 Spring 生态系统不断修正、升级&#xff0c;在 spring boot 项目中加入 springsecurit…

Ubuntu下安装Miniconda

下载 到根据自己本地python版本到官网下载 https://docs.conda.io/en/latest/miniconda.html#linux-installers 我本地是python3.8 然后上传到Ubuntu服务器上&#xff0c;或者直接使用wget下载&#xff1a; wget https://repo.anaconda.com/miniconda/Miniconda3-py38_23.5…

WebSocket理论和实战

一 WebSocket理论 1.1 什么是http请求 http链接分为短链接、长链接&#xff0c;短链接是每次请求都要三次握手才能发送自己的信息。即每一个request对应一个response。长链接是在一定的期限内保持链接&#xff08;但是是单向的&#xff0c;只能从客户端向服务端发消息&#x…

单例模式、指令重排序、锁、有序性

今天在回顾单例模式时&#xff0c;我们都知道懒汉式单例中有一种叫做双重检查锁的单例模式。 我们来看下下面的代码有没有问题&#xff1a; 这段代码我们可以看到&#xff0c;即优化了性能&#xff0c;在多线程情况下&#xff0c;如果实例不为空了&#xff0c;则直接返回了。…

1766_perl实现readlines功能

全部学习汇总&#xff1a; GreyZhang/perl_basic: some perl basic learning notes. (github.com) 近段时间写一个Perl程序&#xff0c;中间反反复复用到了文件的读写。虽说是用Perl的基本功能实现读写非常简单&#xff0c;但是写的过程中我不止一次在想Python以及MATLAB的功能…

华为OD机试真题 Java 实现【评论转换输出】【2023 B卷 100分】,附详细解题思路

目录 专栏导读一、题目描述在这里插入图片描述二、输入描述三、输出描述四、解题思路五、Java算法源码六、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A…

什么是元学习?外循环和内循环?支持集和查询集?

一、前言 元学习近几年也算是一个比较热门的研究方向&#xff0c;大部分被用来解决低资源少样本零样本学习的任务场景中。 那么为什么元学习可以提升低资源少样本的学习效果呢&#xff1f;活着说元学习到底是一个什么阳的算法呢&#xff1f; 这里做一个简单的概念阐述。元学…

echart之map地图图表使用教程

本文以echarts展示成都地图为例子。 echarts map &#xff08;echarts地图&#xff09;使用教程 效果展示准备阶段获取地图geojson数据安装echarts 开始绘制容器准备js代码 补充事项vue3.0 用ref定义echarts报错toRaw、markRaw 扩展 地图隐藏南海诸岛地图显示提示框地图实现下钻…

Vue项目的启动

前言&#xff1a; 由于最近开始实习&#xff0c;负责人上来就给我丢一个前端vue项目和后端文件&#xff0c;让我在本机完成部署&#xff0c;由于之前学的基本上都是后端相关知识&#xff0c;很少有了解到前端的东西&#xff0c;因此在这里将自己部署Vue项目时遇到的问题和解决过…