最近用 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]);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538069.html
標籤：其他
下一篇：React-初始