chore: route 对象 id 修改为 key，完善类型

wanpan11 · Aug 13, 2024 · 89fae1d · 89fae1d
1 parent f3240f5
commit 89fae1d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/index.d.ts b/src/index.d.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-use-before-define */
 interface PathRoute {
-  id?: string;
+  key?: string;
   path: string;
   title?: string;
   index?: boolean;
@@ -11,7 +11,7 @@ interface PathRoute {
   childrenList?: Route[];
 }
 interface IndexRoute {
-  id?: string;
+  key?: string;
   path?: string;
   title?: string;
   index: boolean;
@@ -30,21 +30,22 @@ interface PageProps {
 interface MenuItem {
   key: string;
   path: string;
-  label: string | JSX.Element;
+  label: string | ReactNode;
+  icon?: ReactNode;
   children?: MenuItem[];
 }
 interface FormItem {
   name: string | (number | string)[];
-  label?: string | JSX.Element;
+  label?: string | ReactNode;
   placeholder?: string;
   initialValue?: unknown;
   rule?: any;
   hide?: boolean;
   disable?: boolean;
-  extra?: string | JSX.Element;
+  extra?: string | ReactNode;
   type: "input" | "numberInput" | "select" | "datePick" | "rangePick" | "radio" | "checkbox" | "textArea" | "switch" | "blockNode" | "node";
   // 特有属性
-  rightNode?: JSX.Element;
+  rightNode?: ReactNode;
   mode?: "multiple";
   optionType?: "default" | "button";
   maxLength?: number;

diff --git a/src/router/config.tsx b/src/router/config.tsx
@@ -122,7 +122,7 @@ export function transformRouter(routers: Route[]) {
 
   function transform(arr: Route[], router: Route[], menu: MenuItem[], partePath = "") {
     arr.forEach(element => {
-      const id = nanoid();
+      const key = nanoid();
       const { path, title, index, icon, notMenu, childrenList } = element;
 
       let newPath = path as string;
@@ -132,15 +132,15 @@ export function transformRouter(routers: Route[]) {
         newPath = (path + "/").replace(/\/\/+/g, "/");
       }
 
-      const routeObj = {
+      const routeObj: Route = {
         ...element,
-        id,
+        key,
         path: index ? partePath : newPath,
         childrenList: [],
       };
 
-      const menuObj = {
-        key: id,
+      const menuObj: MenuItem = {
+        key,
         path: index ? partePath : (path as string),
         label: title ? title : "",
         icon: iconMapping[icon],
@@ -151,12 +151,12 @@ export function transformRouter(routers: Route[]) {
       if (!notMenu) menu.push(menuObj);
 
       if (childrenList?.length) {
-        transform(childrenList, routeObj.childrenList, menuObj.children, newPath);
+        transform(childrenList, routeObj.childrenList!, menuObj.children!, newPath);
       }
     });
   }
-
   transform(routers, router, routerMenu);
+
   return { router, routerMenu: routerMenu[0]?.children as MenuItem[] };
 }
 
@@ -197,7 +197,7 @@ export const getPathRecord = (routes: Route[]) => {
 export const getRoute = (routers: Route[] | Route) => {
   const list = Array.isArray(routers) ? routers : [routers];
   return list.map(e => {
-    const { id = nanoid(), path, title, index, redirect, component: componentPath, childrenList = [] } = e;
+    const { key = nanoid(), path, title, index, redirect, component: componentPath, childrenList = [] } = e;
 
     let element: ReactNode = null;
     if (redirect) element = <Redirect redirect={redirect}></Redirect>;
@@ -211,9 +211,9 @@ export const getRoute = (routers: Route[] | Route) => {
     }
 
     const jsx = index ? (
-      <Route key={id} element={element} index></Route>
+      <Route key={key} element={element} index></Route>
     ) : (
-      <Route key={id} element={element} path={path}>
+      <Route key={key} element={element} path={path}>
         {childrenList.length ? getRoute(childrenList) : undefined}
       </Route>
     );