最近用 antd pro 开发了一些 web 小工具 
    
    
  。

antd pro 不仅仅是升级版的 antd 组件 
    
    
  ，更重要的是提供了全套的前端解决方案
     


     


     
，包括前端工程的编译打包 




 




 




，路由配置 

   

   

 ，数据管理
     

     

     ，样式和资源的引用  




  




  




，和后端的交互方式
     


     


     
。

甚至对于网站的国际化也有支持 




 




 




。

本篇是近期使用antd pro 时 


  


  


，用到的一些功能的整理
     
     
     ，整理这些内容是因为比较常用   




   




   



，省得每次在 antd pro 的官方文档中去搜索 

   

   

 。

菜单部分

antd pro一般用在后台的管理系统 



 



 



，所以菜单部分是重中之重              ，antd pro 的菜单是集中在一个文件中（config/routes.ts）配置的
    




    




    


，非常方便
     

     

     。

子菜单配置

管理系统中














，随着管理粒度的细分              ，子菜单是必不可少的
     



     



     

，antd pro中配置菜单主要在2个地方：

config/routes.ts src/locales/zh-CN/menu.ts

配置子菜单的路由：

{ path: auth, // 一级菜单路由 name: auth, // 一级菜单名称 icon: team, // 一级菜单 routes: [ { path: /auth/user, // 二级菜单路由 name: user, // 二级菜单名称 component: ./auth/user/UserList, // 二级菜单对应的模块 }, ], }

继续在 path: /auth/user中配置 routes:[ ... ]就能形成三级菜单

配置菜单的名称：

menu.auth: 认证权限, menu.auth.user: 用户管理,

隐藏的菜单

有时候














，我们配置的一些路由并不希望它出现在菜单中 
    
    
  ，比如一些新增
     


     


     
，修改页面 




 




 




，在页面跳转中会出现 

   

   

 ，但是不需要显示在菜单中
     

     

     ，这时  




  




  




，只需如下设置：

{ path: /data/:data_id/detail, name: data.detail, hideInMenu: true, // 隐藏此路由在菜单中的显示 component: ./data/detail/DataDetailList, },

table组件

ProTable 是 antd pro 中的重要组件 


  


  


，实际上我是通过使用 ProTable 才开始逐渐使用 antd pro 的  




  




  




。

这个组件可以方便的在表格中展示各种形态的数据
     
     
     ，也很好的集成了分页和检索功能   




   




   



，基本上 



 



 



，只要准备好要展示的数据              ，配置下表格的各个列
    




    




    


，数据的展示和基本的互动都自动完成了 


  


  


。

这里简单整理下数据的加载方式：

<ProTable<API.DataDetailItem> columns={columns} // columns 是定义各个列属性的变量














，这里不再详细列出了 rowKey="id" rowClassName={getRowClassName} // 这里可以自定义一个函数              ，突出显示正在操作的行 actionRef={tableRef} headerTitle={`【${dataSource}】的明细数据`} search={{ labelWidth: auto, }} toolBarRender={() => [ // 这里其实可以定义一系列操作表格的按钮或其他组件 <Button key="button" icon={<PlusOutlined />} type="primary" onClick={() => { setModalAddVisible(true); }} > 新建 </Button>, ]} request={async (params: API.DataDetailItem & API.PageInfo) => { const resp = await getDataDetailList(params); // getDataDetailList 是自定义的请求后台数据的API return { data: resp.data.data_detail, total: resp.data.data_detail_aggregate.aggregate.count, }; }} />

ProTable这里其实是定义了table中要处理的数据类型
     
     
     。

DataDetailItem不用和 table的 column完全一致
     



     



     

，返回业务需要返回的数据即可














，一般会比 column 要求的内容多   




   




   



。

request属性可以是一个异步函数 
    
    
  ，用来初始化 ProTable 的 



 



 



。

它的参数中包含了分页信息API.PageInfo和返回的数据类型 API.DataDetailItem
     


     


     
，

其中API.PageInfo包含的信息很简单： type PageInfo = { pageSize?: number; // 每页显示的数量 current?: number; // 当前是哪一页 };

而数据类型API.DataDetailItem则是和 ProTable<API.DataDetailItem> 定义的类型相对应              。

路由组件

在 antd pro 中 




 




 




，路由就在 config/routes.ts中集中配置 

   

   

 ，并且可以和菜单关联
     

     

     ，非常简单
    




    




    


。

这里就整理两点  




  




  




，一个是页面中获取带参数路由的参数 


  


  


，一个是页面间的路由跳转（不是通过菜单来跳转路由）














。

带参数的路由

路由配置在 config/routes.ts中：

{ path: /data/:data_id/meta, name: data.meta, hideInMenu: true, component: ./data/meta/MetaDataList, }

在对应的页面中
     
     
     ，可以这样获取路由中的参数 data_id

import { useParams } from umi; type MetaDataParams = { data_id: string; }; // 定义路由参数的类型   




   




   



，这里只有一个参数 data_id export default () => { const urlParams = useParams<MetaDataParams>(); console.log(urlParams.data_id); }

路由跳转

通过菜单的跳转不用额外配置 



 



 



，只要在 config/routes.ts中定义即可              。

除此之外              ，还有一些页面跳转时不通过菜单的
    




    




    


，比如从列表页面到明细页面














，

列表页面的跳转：

import { history } from umi; // 省略.... .... <Button type="link" size="small" key="detail" onClick={() => { history.push(/data/ + rd.id + /detail); }} > 明细 </Button>, // 省略.... ....

明细页面返回列表页面：

import { history } from umi; // 省略.... .... <Button key="back" icon={<RollbackOutlined />} onClick={() => { history.goBack(); }} > 返回 </Button>, // 省略.... ....

页面初始化

其实              ，antd pro 的数据展示组件基本都有 request属性
     



     



     

，用来初始化其中的数据














，比如上面提到的 ProTable 组件
     



     



     

。

但是 
    
    
  ，有时候在详情或者编辑页面
     


     


     
，还是会需要加载一些其他的数据 




 




 




，这时候 

   

   

 ，就需要在页面加载时初始化一些数据
     

     

     ，本质上这是 React 的功能  




  




  




，而不是 antd pro 的功能














。

比如 


  


  


，详情页面根据ID加载其他信息：

import { useState, useEffect } from react; import { history, useParams } from umi; type MetaDataParams = { data_id: string; }; export default () => { const urlParams = useParams<MetaDataParams>(); const [dataSource, setDataSource] = useState(); useEffect(() => { if (dataSource === ) { (async function initDataItem() { const d = await getDataById(urlParams.data_id); // getDataById 是访问后端API的函数 console.log(d); setDataSource(d.data.data_source_by_pk.name || ); })(); } console.log(effect); }, [dataSource, urlParams]); }