更规范 更健壮 REACT

​​目标: 更规范 更健壮👏​​

菜单列表 & 图标
定义菜单项及图标枚举

export interface MenuConfig {
  title?: string;
  path: string;
  icon?: IconList;
  children?: Array<MenuConfig>;
}

export enum IconList {
  Dashboard = "Dashboard",
  TodoList = "TodoList",
  Role = "Role",
}

const menuList: Array<MenuConfig> = [
  {
    path: "/dashboard", // 对应的path
    title: "Dashboard", // 菜单标题名称
    icon: IconList.Dashboard, // 图标名称
  },
  {
    path: "/todoList",
    title: "TodoList",
    icon: IconList.TodoList,
  },
  {
    path: "/role",
    title: "Role",
    icon: IconList.Role,
  },
];
export default menuList;

定义图标项

import {
  Dashboard,
  FormatListBulleted,
  AccessibilityNew,
} from "@material-ui/icons";
import { IconList } from "../../../config/menuConfig";

const DashboardIcon = <Dashboard style={{ fontSize: 24 }} />;
const TodoListIcon = <FormatListBulleted style={{ fontSize: 24 }} />;
const RoleIcon = <AccessibilityNew style={{ fontSize: 24 }} />;

const MenuIcon: { [icon: string]: JSX.Element } = {
  [IconList.Dashboard]: DashboardIcon,
  [IconList.TodoList]: TodoListIcon,
  [IconList.Role]: RoleIcon,
};
/**
 * 这样图标的名称指定到IconList中定义的才行，
 * 防止route定义的icon属性和MenuIcon的属性出现误差导致出错
 */
export default MenuIcon;

使用图标

const renderMenuItem = useCallback((menu: MenuConfig) => {
    const { path, title, icon } = menu;
    return (
      <Menu.Item
        key={path}
        title={title}
        icon={MenuIcon[IconList[icon as IconList]]}
      >
      {/* icon as IconList
          icon 可能是undefined 所以指定IconList 不报错
        */}
        <NavLink to={{ pathname: path }}>{title}</NavLink>
      </Menu.Item>
    );
  }, []);