antd pro 使用心得
最近用 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<API.DataDetailItem>这里其实是定义了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]);
}