React_TS 学习笔记(3-1)项目开发常见问题

// 下载项目git clone https://gitee.com/xiaoli-account/react19_ts.git# 使用 npm 为前端项目安装依赖npm install# 为 mock 项目安装依赖cd mock npm install# 启动前端项目 并 启动 mock 服务npm run mock# 访问地址：http://localhost:4200

// src\pages\sso-loading\index.tsx L99-163function transformRoutes(routes: any[]): any[] {if (!routes || !Array.isArray(routes)) return [];// 使用 import.meta.glob 收集所有的页面组件模块，防止 Vite 动态 import 解析警告const pageModules = import.meta.glob("@/pages/**/*.tsx");const aiPageModules = import.meta.glob("@ai/pages/**/*.tsx");return routes.map((route: any) => {	  // 获取原始的 java 数据字段	  const reactRoute = { ...route };	  // 映射至 react 格式所需的字段	  reactRoute.path = route.route_path;	  reactRoute.name = route.name;	  // 如果存在 redirect 属性并且不为空	  if (route.redirect) {		reactRoute.redirect = route.redirect;	  }	  // 组装 meta 数据	  reactRoute.meta = {title: route.title,		...route.meta, // 兼容如果后续接口直接返回了metaicon: route.icon || "AppstoreOutlined",pagePermission: route.permission,hidden: !!route.hidden,keepAlive: !!route.keep_alive,	  };	  // 处理由后端传递的 component_path 并转换为真正的 react 组件	  if (route.component_path) {// 解决 Vite 动态 import 全局无扩展名的警告const targetPath1 = `/src/pages/${route.component_path}.tsx`;const targetPath2 = `/src/pages/${route.component_path}/index.tsx`;const targetAIPath1 = `/src_ai/pages/${route.component_path}.tsx`;const targetAIPath2 = `/src_ai/pages/${route.component_path}/index.tsx`;if (pageModules[targetPath1]) {		  reactRoute.component = pageModules[targetPath1];		} else if (pageModules[targetPath2]) {		  reactRoute.component = pageModules[targetPath2];		} else if (aiPageModules[targetAIPath1]) {		  reactRoute.component = aiPageModules[targetAIPath1];		} else if (aiPageModules[targetAIPath2]) {		  reactRoute.component = aiPageModules[targetAIPath2];		} else {		  console.warn(`小李警告：[sso-loading/index.tsx] 无法匹配到路由组件: ${route.component_path}`		  );		}	  }	  // 递归处理子层级，直至没有 children	  if (		route.children &&Array.isArray(route.children) &&		route.children.length > 0	  ) {		reactRoute.children = transformRoutes(route.children);	  }	  return reactRoute;	});  }

// vite.config.tsresolve: {  alias: {'@': path.resolve(__dirname, './src'),'@AI': path.resolve(__dirname, './src_ai'),'@ai': path.resolve(__dirname, './src_ai'),  },},

// tsconfig.app.json"paths": {  "@/*": ["src/*"],  "@AI/*": ["src_ai/*"],  "@ai/*": ["src_ai/*"]},

.parent{    &:focus-within {    }}

<Tablecolumns={columns}dataSource={data}rowKey="id"loading={loading}pagination={false}scroll={{ x: "max-content" }}expandable={{	  expandedRowKeys,	  onExpandedRowsChange: (keys) => setExpandedRowKeys(keys as Key[]),	}}  />

<Form><Rowgutter={16}><Colspan={24}></Col><Colspan={12}></Col><Colspan={8}></Col></Row></Form>

// 使用Form.Item进行外层嵌套<Form.Item	  noStyle	  shouldUpdate={(prev: any, curr: any) =>		prev.menu_type !== curr.menu_type	  }	>// 取值判断，控制条件显示	  {({ getFieldValue }) => {const menu_type = getFieldValue("menu_type");return menu_type !== "Directory" ? (		  <Colspan={24}>		  </Col>		) : null;	  }}</Form.Item>