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 ;
}

登录页面

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 (
    

      

        
          
        
        
          
        
        
          
            登录
          
        
      
    
  );
}
export default observer(A8Login);

• 用 useNavigate() 返回的函数跳转的代码不能包含在函数式组件的主逻辑中，只能放在

  • 其它事件处理函数中

  • 写在副作用函数 useEffect 之中