124 lines
3.7 KiB
Markdown
124 lines
3.7 KiB
Markdown
|
# 动态面包屑导航实现说明
|
|||
|
|
|
|||
|
|
## 功能介绍
|
|||
|
|
|
|||
|
|
本项目实现了动态修改页面面包屑名称的功能，特别适用于新增和修改页面共用一个组件的场景。通过 dva 状态管理，可以在具体页面中动态设置面包屑导航的最后一级显示文本。
|
|||
|
|
|
|||
|
|
## 实现原理
|
|||
|
|
|
|||
|
|
1. 通过 `breadcrumb` 模型管理面包屑状态
|
|||
|
|
2. 使用 `connect` 将 `breadcrumb` 状态连接到布局组件
|
|||
|
|
3. 在页面组件中根据不同条件（如是否有 id 参数）来动态设置面包屑名称
|
|||
|
|
|
|||
|
|
## 代码结构
|
|||
|
|
|
|||
|
|
- `src/models/breadcrumb.ts` - 面包屑状态模型
|
|||
|
|
- `src/layouts/BasicLayout.tsx` - 支持动态面包屑的布局组件
|
|||
|
|
|
|||
|
|
## 使用示例
|
|||
|
|
|
|||
|
|
### 实际项目中的使用方式 (supplierAnnualTemplateManageAdd.tsx)
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
import React, { useEffect } from 'react';
|
|||
|
|
import { useIntl, connect } from 'umi';
|
|||
|
|
import type { Dispatch } from 'umi';
|
|||
|
|
import type { BreadcrumbState } from '@/models/breadcrumb';
|
|||
|
|
|
|||
|
|
// 组件 props 接口定义
|
|||
|
|
interface PageProps extends ConnectProps {
|
|||
|
|
breadcrumb: BreadcrumbState; // dva model状态
|
|||
|
|
dispatch: Dispatch; // dva dispatch方法
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const YourPage: React.FC<PageProps> = ({ dispatch }) => {
|
|||
|
|
const intl = useIntl();
|
|||
|
|
const location = useLocation();
|
|||
|
|
|
|||
|
|
// 设置面包屑名称
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (location.state?.editData?.id && dispatch) {
|
|||
|
|
// 编辑模式，设置编辑相关的面包屑
|
|||
|
|
dispatch({
|
|||
|
|
type: 'breadcrumb/updateBreadcrumbName',
|
|||
|
|
payload: intl.formatMessage({ id: "yourNamespace.add.edit" }),
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
// 新增模式，设置新增相关的面包屑
|
|||
|
|
dispatch({
|
|||
|
|
type: 'breadcrumb/updateBreadcrumbName',
|
|||
|
|
payload: intl.formatMessage({ id: "yourNamespace.add.title" }),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 组件卸载时重置面包屑
|
|||
|
|
return () => {
|
|||
|
|
dispatch({
|
|||
|
|
type: 'breadcrumb/resetBreadcrumb',
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
}, [dispatch, intl, location]);
|
|||
|
|
|
|||
|
|
// 页面其他内容...
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
{/* 页面内容... */}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 将dva model中的状态映射到组件props
|
|||
|
|
export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
|
|||
|
|
breadcrumb,
|
|||
|
|
}))(YourPage);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 关键实现点
|
|||
|
|
|
|||
|
|
1. 在页面组件中通过 connect 连接到 dva 状态：
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// 将dva model中的状态映射到组件props
|
|||
|
|
export default connect(({ breadcrumb }: { breadcrumb: BreadcrumbState }) => ({
|
|||
|
|
breadcrumb,
|
|||
|
|
}))(YourPage);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. 在 useEffect 中动态设置面包屑名称：
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
useEffect(() => {
|
|||
|
|
// 根据条件设置不同的面包屑名称
|
|||
|
|
if (location.state?.editData?.id) {
|
|||
|
|
dispatch({
|
|||
|
|
type: 'breadcrumb/updateBreadcrumbName',
|
|||
|
|
payload: intl.formatMessage({ id: "yourNamespace.add.edit" }),
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
dispatch({
|
|||
|
|
type: 'breadcrumb/updateBreadcrumbName',
|
|||
|
|
payload: intl.formatMessage({ id: "yourNamespace.add.title" }),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 组件卸载时重置面包屑
|
|||
|
|
return () => {
|
|||
|
|
dispatch({
|
|||
|
|
type: 'breadcrumb/resetBreadcrumb',
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
}, [dispatch, intl, location]);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **payload 必须是字符串**：传递给 `updateBreadcrumbName` action 的 payload 必须是字符串类型，不能是对象或 React 组件
|
|||
|
|
- 正确：`payload: intl.formatMessage({ id: "menu.edit" })`
|
|||
|
|
- 错误：`payload: { breadcrumbName: <FormattedMessage id="menu.edit" /> }`
|
|||
|
|
|
|||
|
|
2. **重置面包屑**：确保在组件卸载时调用 `resetBreadcrumb` 以重置面包屑状态
|
|||
|
|
|
|||
|
|
3. **国际化处理**：使用 `intl.formatMessage()` 方法处理国际化文本，不要在 payload 中直接使用 FormattedMessage 组件
|
|||
|
|
|
|||
|
|
4. **依赖项管理**：确保 useEffect 的依赖项包含 `dispatch`, `intl` 和用于条件判断的变量（如 `location`）
|