Maofeng
72 lines
2.2 KiB
Plaintext
72 lines
2.2 KiB
Plaintext
---
|
||
title: 标题 Portal
|
||
description: 将页面标题安全地挂载到应用外壳，同时保留 SSR fallback。
|
||
order: 20
|
||
toc:
|
||
- id: info-resolver
|
||
title: 页面信息解析器
|
||
- id: managed-target
|
||
title: 管理标题目标
|
||
- id: fallback
|
||
title: Fallback
|
||
- id: nested-managers
|
||
title: 嵌套 Manager
|
||
---
|
||
|
||
## 页面信息解析器 {#info-resolver}
|
||
|
||
`PagesManager.getPageInfo` 用于把路由或布局元数据接入页面组件。它接收 `PageContainer` 可选的 `Partial<PageInfo>`，返回补全后的 `PageInfo`；没有可用的托管信息时也可以返回 `undefined`：
|
||
|
||
```tsx
|
||
<PagesManager
|
||
getPageInfo={(info) => ({
|
||
breadcrumb: info?.breadcrumb ?? routeMetadata.breadcrumb,
|
||
description: info?.description ?? routeMetadata.description,
|
||
subtitle: info?.subtitle ?? routeMetadata.subtitle,
|
||
title: info?.title ?? routeMetadata.title,
|
||
})}
|
||
>
|
||
<Outlet />
|
||
</PagesManager>
|
||
```
|
||
|
||
解析器返回 `undefined` 时，`PageContainer` 仍会把自身局部信息与继承的页面信息合并。
|
||
|
||
## 管理标题目标 {#managed-target}
|
||
|
||
布局可以把 DOM 容器交给 `PagesManager`，页面再通过 `PageTitlePortal` 把标题放进外部 Header：
|
||
|
||
```tsx
|
||
function ApplicationLayout() {
|
||
const [titleContainer, setTitleContainer] =
|
||
React.useState<HTMLElement | null>(null)
|
||
|
||
return (
|
||
<PagesManager titleContainer={titleContainer}>
|
||
<header>
|
||
<div ref={setTitleContainer} />
|
||
</header>
|
||
<Outlet />
|
||
</PagesManager>
|
||
)
|
||
}
|
||
|
||
function ProductsPage() {
|
||
return (
|
||
<PageTitlePortal>
|
||
<PageTitle>商品</PageTitle>
|
||
</PageTitlePortal>
|
||
)
|
||
}
|
||
```
|
||
|
||
`titleContainer` 接受 `Element` 或 `DocumentFragment`。`PageTitlePortal` 也可以通过自己的 `container` prop 覆盖 Manager。
|
||
|
||
## Fallback {#fallback}
|
||
|
||
没有可用目标时，Portal 默认原位渲染 `children`，因此服务端渲染和第一次客户端渲染不会丢失页面标题。传入 `fallback` 可以替换原位内容，包括传入 `null` 隐藏它。
|
||
|
||
## 嵌套 Manager {#nested-managers}
|
||
|
||
嵌套 `PagesManager` 在未传 `getPageInfo` 和 `titleContainer` 时会继承父级解析器与标题目标。显式传入 `null` 作为 `titleContainer` 可以阻止标题目标继承，使该子树中的标题继续原位渲染。
|