react_15

动态菜单

图标要独立安装依赖

npm install @ant-design/icons

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

TypeScript 复制代码
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>;
}

登录页面

TypeScript 复制代码
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 }}>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 8 }}
        onFinish={onFinish}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: "用户名必须" }]}
        >
          <Input autoComplete="off" />
        </Form.Item>
        <Form.Item
          label="密码"
          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 之中

相关推荐
web安全工具库几秒前
Linux 高手进阶:Vim 核心模式与分屏操作详解
linux·运维·服务器·前端·数据库
一枚前端小能手5 分钟前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_99995 分钟前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
用户14125016652719 分钟前
一文彻底掌握 ECharts:从配置解读到实战应用
前端
LRH21 分钟前
React 架构设计:从 stack reconciler 到 fiber reconciler 的演进
前端
VIjolie23 分钟前
文档/会议类应用的协同同步机制(OT/CRDT简要理解)
前端
不一样的少年_24 分钟前
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
前端·javascript·浏览器
golang学习记25 分钟前
从0死磕全栈之Next.js 企业级 next.config.js 配置详解:打造高性能、安全、可维护的中大型项目
前端
1024小神27 分钟前
next项目使用状态管理zustand说明
前端
Asort27 分钟前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式