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`）
|