### 关于
Ant Design Pro 实现多
页签功能
在
Ant Design Pro 中
实现多
页签功能可以通过
自定义路由和
页面状态来完成。虽然官方并未提供直接的多
页签组件，但通过结合 `react-
tabs` 或者 `rc-
tabs` 等第三方库，以及利用
Ant Design 的 Layout 和
Tabs 组件，可以构建一个多
页签的功能模块。
以下是基于
Ant Design Pro 的一种
实现方式：
#### 1. 使用 React 路由管理器
React Router 是
Ant Design Pro 默认集成的路由管理工具。为了
实现多
页签功能，可以在全局维护一个标
签数组的状态，并将其与路由绑定。
```javascript
import { useState, useEffect } from 'react';
import {
Tabs, Button } from '
antd';
const {
TabPane } =
Tabs;
function Multi
TabExample() {
const [
tabsState, set
TabsState] = useState([
{ key: '
tab1', title: '首
页' },
]);
const addNew
Tab = (newKey, newTitle) => {
const isExist =
tabsState.some(
tab =>
tab.key === newKey);
if (!isExist) {
set
TabsState([...
tabsState, { key: newKey, title: newTitle }]);
}
};
const remove
Tab = (targetKey) => {
let newActiveKey;
const filtered
Tabs =
tabsState.filter((
tab) =>
tab.key !== targetKey);
if (filtered
Tabs.length && activeKey === targetKey) {
newActiveKey = filtered
Tabs[filtered
Tabs.length - 1].key || '';
}
set
TabsState(filtered
Tabs);
};
return (
<div>
<Button onClick={() => addNew
Tab('
tab2', '新
页面')}>新增</Button>
<
Tabs type="edi
table-card" onChange={addNew
Tab} onEdit={(targetKey) => remove
Tab(targetKey)}>
{
tabsState.map(({ key, title }) => (
<
TabPane
tab={title} key={key}>
内容-{key}
</
TabPane>
))}
</
Tabs>
</div>
);
}
export default Multi
TabExample;
```
此代码片段展示了如何动态添加和移除标
签页[^6]。
#### 2. 集成到
Ant Design Pro
在实际项目中，需要将上述逻辑嵌入到项目的 Layout 文件中。通常情况下，
Ant Design Pro 提供了一个默认的菜单导航结构，因此可以通过
修改 `src/layouts/BasicLayout.js` 来引入多
页签功能。
具体操作如下：
-
修改 `BasicLayout.js` 文件中的顶部区域，替换为
Tabs 组件。
- 将当前激活的路由路径映射为对应的标
签键值。
- 添加监听事件，在切换路由时更新标
签列表。
#### 3. 社区支持与扩展
如果遇到复杂场景下的多
页签需求，建议参考社区资源。例如 GitHub 上的相关 Issue 讨论[^7]可能提供了更多优化方案。此外，由于
Ant Design Pro 基于
Ant Design 构建，其生态内的插件和支持也适用于该
框架[^5]。
---
###
博客介绍了在使用Ant Design Pro框架时，若页签标题存在Ant Design Pro字段，可将其自定义修改。具体方法是找到src文件夹下layouts文件夹中的BasicLayout.js文件进行修改。
扫一扫
7171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
