react_15

动态菜单

图标要独立安装依赖

npm install @ant-design/icons

图标组件,用来将字符串图标转换为标签图标

import * as icons from "@ant-design/icons";
interface Module {[p: string]: any;
}
const all: Module = icons;
export default function Icon({ name }: { name: string }) {const Icon = all[name];return <Icon></Icon>;
}

登录页面

import { Button, Form, Input, message } from "antd";
import RoutesStore from "../store/RoutesStore";
import { LoginReq } from "../model/Student";
import { observer } from "mobx-react-lite";
import { useNavigate } from "react-router-dom";
import { useEffect } from "react";function A8Login() {function onFinish(values: LoginReq) {RoutesStore.login(values);}const nav = useNavigate();useEffect(() => {if (RoutesStore.state === "success") {//登陆成功,跳转到主页nav("/");} else if (RoutesStore.state === "error") {//登录失败message.error(RoutesStore.message);}}, [RoutesStore.state]);return (<div style={{ paddingTop: 200 }}><Formname="basic"labelCol={{ span: 8 }}wrapperCol={{ span: 8 }}onFinish={onFinish}><Form.Itemlabel="用户名"name="username"rules={[{ required: true, message: "用户名必须" }]}><Input autoComplete="off" /></Form.Item><Form.Itemlabel="密码"name="password"rules={[{ required: true, message: "密码必须" }]}><Input.Password autoComplete="off" /></Form.Item><Form.Item wrapperCol={{ offset: 8, span: 6 }}><Button type="primary" htmlType="submit">登录</Button></Form.Item></Form></div>);
}
export default observer(A8Login);
  • 用 useNavigate() 返回的函数跳转的代码不能包含在函数式组件的主逻辑中,只能放在

    • 其它事件处理函数中

    • 写在副作用函数 useEffect 之中

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

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

相关文章

【PyTorch 卷积】实战自定义的图片归类

前言 卷积神经网络是一类包含卷积计算且具有深度结构的前馈神经网络&#xff0c;是深度学习的代表算法之一&#xff0c;它通过卷积层、池化层、全连接层等结构&#xff0c;可以有效地处理如时间序列和图片数据等。关于卷积的概念网络上也比较多&#xff0c;这里就不一一描述了。…

【强化学习】17 ——DDPG(Deep Deterministic Policy Gradient)

文章目录 前言DDPG特点 随机策略与确定性策略DDPG&#xff1a;深度确定性策略梯度伪代码代码实践 前言 之前的章节介绍了基于策略梯度的算法 REINFORCE、Actor-Critic 以及两个改进算法——TRPO 和 PPO。这类算法有一个共同的特点&#xff1a;它们都是在线策略算法&#xff0c…

【踩坑及思考】浏览器存储 cookie 最大值超过 4kb,或 http 头 cookie 超过限制值

背景 本地生产环境&#xff1a;超过最大值 cookie token 不存储&#xff1b;客户生产环境&#xff1a;打开系统空白&#xff0c;且控制台报 http 400 错误&#xff1b; 出现了两种现象 现象一&#xff1a;浏览器对大于 4kb 的 cookie 值不存储 导致用户名密码登录&#xff…

解决问题 [Vue warn]: Missing required prop: “index“

vue项目控制台报错 [Vue warn]: Missing required prop: “index” 出现这个报错原因是<el-submenu></el-submenu>标签中缺少index属性&#xff0c;需要加上才能不报错 解决办法是&#xff1a; <el-submenu index""></el-submenu>

linux 下 物理迁移 mysql 数据库 不能启动问题

1、授权问题 # chown -R 777 /app/db/mysql 2、/etc/my.cnf配置问题 [mysqld] basedir/app/db/mysql datadir/app/db/mysql/data socket/app/db/mysql/mysql.sock.lock innodb_buffer_pool_size128M innodb_force_recovery 1 symbolic-links0 [mysqld_safe] log-error/app/…

linux驱动开发环境搭建

使用的是parallel 创建的ubuntu 16.04 ubuntu20.04虚拟机 源码准备 # 先查看本机版本 $ uname -r 5.15.0-86-generic# 搜索相关源码 $ sudo apt-cache search linux-source [sudo] password for showme: linux-source - Linux kernel source with Ubuntu patches linux-sourc…

笔记软件 Keep It mac v2.3.3中文版新增功能

Keep It mac是一款专为 Mac、iPad 和 iPhone 设计的笔记和信息管理应用程序。它允许用户在一个地方组织和管理他们的笔记、网络链接、PDF、图像和其他类型的内容。Keep It 还具有标记、搜索、突出显示、编辑和跨设备同步功能。 Keep It for mac更新日志 修复了更改注释或富文本…

Nacos-2.2.2源码修改集成高斯数据库GaussDB,postresql

一 &#xff0c;下载代码 Release 2.2.2 (Apr 11, 2023) alibaba/nacos GitHub 二&#xff0c; 执行打包 mvn -Prelease-nacos -Dmaven.test.skiptrue -Drat.skiptrue clean install -U 或 mvn -Prelease-nacos ‘-Dmaven.test.skiptrue’ ‘-Drat.skiptrue’ clean instal…

【H.264】RTP h264 码流 实例解析分析 3 : webrtc

【srs】SRS检测IBMF还是annexb 【H.264】RTP h264 码流 实例解析分析 2 : mediasoup收包 mediasoup 并没完整解析rtp包的内容,可能与mediasoup 只需要转发,不需要解码有关系。 webrtc 本身都是全的。 m98代码,先说关键: webrtc的VideoRtpDepacketizer 第一:对RTPVideoType…

成员变量为动态数据时不可轻易使用

问题描述 业务验收阶段&#xff0c;遇到了一个由于成员变量导致的线程问题 有一个kafka切面&#xff0c;用来处理某些功能在调用前后的发送消息&#xff0c;资产类型type是成员变量定义&#xff1b; 资产1类型推送消息是以zichan1为节点&#xff1b;资产2类型推送消息是以zi…

社区牛奶智能售货机为你带来便利与实惠

社区牛奶智能售货机为你带来便利与实惠 低成本&#xff1a;社区牛奶智能货机的最大优势在于成本低廉&#xff0c;租金和人工开支都很少。大部分时间&#xff0c;货柜都是由无人操作来完成销售任务。 购买便利&#xff1a;社区居民只需通过手机扫码支付&#xff0c;支付后即可自…

二、计算机组成原理与体系结构

&#xff08;一&#xff09;数据的表示 不同进制之间的转换 R 进制转十进制使用按权展开法&#xff0c;其具体操作方式为&#xff1a;将 R 进制数的每一位数值用 Rk 形式表示&#xff0c;即幂的底数是 R &#xff0c;指数为 k &#xff0c;k 与该位和小数点之间的距离有关。当…

Execution failed for task ‘:keyboard_utils:compileDebugKotlin‘.

Execution failed for task ‘:keyboard_utils:compileDebugKotlin’. 这个错误是keyboard_utils依赖报错。 这个问题在keyboard_utils github项目的issues 有记载Project does not run with new Flutter 2.10.0 详细错误信息&#xff1a; e: /Users/andreifufylev/developme…

语义分割准确率计算

目录 pytorch版 pytorch准确率,miou: sklearn版 pytorch版 """ reference from: https://github.com/LeeJunHyun/Image_Segmentation/blob/master/evaluation.py """import torch# SR : Segmentation Result # GT : Ground Truthdef get_a…

【PyTorch实战演练】AlexNet网络模型构建并使用Cifar10数据集进行批量训练(附代码)

目录 0. 前言 1. Cifar10数据集 2. AlexNet网络模型 2.1 AlexNet的网络结构 2.2 激活函数ReLu 2.3 Dropout方法 2.4 数据增强 3. 使用GPU加速进行批量训练 4. 网络模型构建 5. 训练过程 6. 完整代码 0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我…

【Shell 系列教程】Shell printf 命令( 六)

文章目录 往期回顾Shell printf 命令printf 的转义序列 往期回顾 【Shell 系列教程】shell介绍&#xff08;一&#xff09;【Shell 系列教程】shell变量&#xff08;二&#xff09;【Shell 系列教程】shell数组&#xff08;三&#xff09;【Shell 系列教程】shell基本运算符&a…

[开源]企业级在线办公系统,基于实时音视频完成在线视频会议功能

一、开源项目简介 企业级在线办公系统 本项目使用了SpringBootMybatisSpringMVC框架&#xff0c;技术功能点应用了WebSocket、Redis、Activiti7工作流引擎&#xff0c; 基于TRTC腾讯实时音视频完成在线视频会议功能。 二、开源协议 使用GPL-3.0开源协议 三、界面展示 部分…

【Mybatis】xml常用总结(持续更新)

目录 一、常用增删改查 查询&#xff08;SELECT&#xff09;操作 插入&#xff08;INSERT&#xff09;操作 更新&#xff08;UPDATE&#xff09;操作 删除&#xff08;DELETE&#xff09;操作 批量插入&#xff08;INSERT&#xff09;操作 批量删除&#xff08;DELETE&a…

2024天津理工大学中环信息学院专升本机械设计制造自动化专业考纲

2024年天津理工大学中环信息学院高职升本科《机械设计制造及其自动化》专业课考试大纲《机械设计》《机械制图》 《机械设计》考试大纲 教 材&#xff1a;《机械设计》&#xff08;第十版&#xff09;&#xff0c;高等教育出版社&#xff0c;濮良贵、陈国定、吴立言主编&#…

LeeCode每日一题:208. 实现 Trie (前缀树)

Trie&#xff08;发音类似 "try"&#xff09;或者说 前缀树 是一种树形数据结构&#xff0c;用于高效地存储和检索字符串数据集中的键。这一数据结构有相当多的应用情景&#xff0c;例如自动补完和拼写检查。 请你实现 Trie 类&#xff1a; Trie() 初始化前缀树对象…