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 之中