Refine 教程Ant Design React Router 场景下使用 ThemedLayout 定制布局与标题【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本篇教程基于 Refine 官方 Ant Designreact-router 版本教程章节讲解如何为应用接入默认的ThemedLayout /布局以及如何通过Titleprop 替换为自定义ThemedTitle /来修改应用标题。读完后你将掌握理解ThemedLayout /的组件构成Header/Sider/Title/Footer/OffLayoutArea与可定制点、在src/App.tsx中用一行代码替换应用标题、以及理解侧边栏菜单标签meta.label的生成机制并能在源码层面印证这些行为。为什么需要布局Layout按照教程的进度在之前的步骤中我们已经用ConfigProvider、AntdApp等 Ant Design 样式组件包裹了应用。进入本步骤后目标是为应用添加布局。Refine 通过各 UI 集成包如refinedev/antd提供默认布局组件ThemedLayout /交付一个侧边栏 主内容区的两栏布局。ThemedLayout /默认包含以下能力Header当应用配置了authProvider时展示当前用户信息名称、头像Sider根据你在Refine中定义的resources自动生成导航链接Logout 按钮当配置了authProvider时出现在侧边栏底部主内容区你的页面内容渲染位置。注意因为布局自身已经提供了 Header 等能力本教程中我们移除了此前自行编写的Header /组件避免功能重复。ThemedLayout 的组件构成五个可定制插槽布局组件并非黑盒而是由若干小组件组合而成并可以通过对应的 props 逐一替换。ThemedLayout /的构成如下教程原文清单组成组件作用定制 propThemedHeader /顶部导航栏HeaderThemedSider /侧边导航栏SiderThemedTitle /侧边栏顶部的 Logo 与应用标题Title页脚组件页脚Footer无默认组件布局外区域组件主内容区之外的附加区域OffLayoutArea无默认组件从源码结构可以印证这一点。在 themedLayout 入口文件 中ThemedLayout接收children、Header、Sider、Title、Footer、OffLayoutArea等 props并采用传入则用传入组件、未传入则用默认组件的策略const SiderToRender Sider ?? DefaultSider; const HeaderToRender Header ?? DefaultHeader;其中Sider与Header接收一个 render 函数SiderToRender({ Title })、HeaderToRender()而Footer与OffLayoutArea则是直接渲染的组件节点。此外整个布局被ThemedLayoutContextProvider包裹源码用于在内部共享侧边栏折叠状态initialSiderCollapsed、onSiderCollapsed这也是ThemedSider能响应折叠/展开的内部机制。ThemedLayout支持的完整 props 类型定义在 ui-types 的 layout 类型文件 中除上述插槽外还包括initialSiderCollapsed侧边栏是否默认折叠与onSiderCollapsed折叠状态变化回调Ant Design 版在 themedLayout/types.ts 中还为 Sider 额外扩展了fixed固定定位属性。实战用 Title prop 添加自定义标题本教程的核心操作是修改应用的标题。我们使用ThemedLayout /的Titleprop 和ThemedTitle /组件来完成。更新src/App.tsx文件添加如下代码对应教程中的 sandpack 定义文件 中给出的最终版本import { Refine, Authenticated } from refinedev/core; import routerProvider, { NavigateToResource } from refinedev/react-router; // highlight-next-line import { ThemedLayout, ThemedTitle } from refinedev/antd; import { BrowserRouter, Routes, Route, Outlet } from react-router; import { ConfigProvider, App as AntdApp } from antd; import { dataProvider } from ./providers/data-provider; import { authProvider } from ./providers/auth-provider; import { ShowProduct } from ./pages/products/show; import { EditProduct } from ./pages/products/edit; import { ListProducts } from ./pages/products/list; import { CreateProduct } from ./pages/products/create; import { Login } from ./pages/login; import antd/dist/reset.css; export default function App(): JSX.Element { return ( BrowserRouter ConfigProvider AntdApp Refine dataProvider{dataProvider} authProvider{authProvider} routerProvider{routerProvider} resources{[ { name: protected-products, list: /products, show: /products/:id, edit: /products/:id/edit, create: /products/create, meta: { label: Products }, }, ]} Routes Route element{ Authenticated keyauthenticated-routes redirectOnFail/login ThemedLayout // highlight-start Title{(props) ( ThemedTitle {...props} textAwesome Project / )} // highlight-end Outlet / /ThemedLayout /Authenticated } {/* ... */} /Route {/* ... */} /Routes /Refine /AntdApp /ConfigProvider /BrowserRouter ); }关键点只有一行Title{(props) ( ThemedTitle {...props} textAwesome Project / )}这里通过Titleprop 传入了一个 render 函数在保持原有 props 透传{...props}的前提下仅覆盖text将应用标题替换为 Awesome Project。其余插槽如Header、Sider都遵循同样的用法——传入一个接收默认 props 的函数即可局部定制。从源码看ThemedTitle /的默认文案是Refine Project且当侧边栏折叠时只保留图标title 组件它还会优先读取Refine全局选项options.titleicon/text作为回退值因此也可以通过全局配置而非局部 prop 来统一标题。源码印证侧边栏标签来自 meta.label教程中特别提示protected-products资源在侧边栏中显示为Products这正是因为在资源定义的meta.label字段中提供了自定义标签。这一机制可以在 ThemedSider 源码 中得到印证侧边栏通过 core 包的useMenu钩子基于resources定义生成菜单树渲染菜单项标签的取值优先级为const label item?.label ?? meta?.label ?? name;即菜单项自带的label→ 资源meta.label→ 资源name。因此只要为资源设置meta: { label: Products }侧边栏就会显示 Products 而不是 protected-products。同样的源码还说明了教程开头提到的另外两点Logout 按钮的条件渲染侧边栏通过useIsExistAuthentication()判断是否存在认证能力存在时才渲染 Logout 菜单项sider 源码用户信息的条件渲染ThemedHeader通过useGetIdentity()获取用户仅当用户存在name或avatar时才渲染 Headerheader 源码。这也解释了教程中的提示正因为布局组件已经内置了这些能力应用层自建的Header /才可以安全移除。此外布局的响应式行为也由源码决定当视口小于lg断点时ThemedSider会退化为 Drawer 汉堡按钮的移动端形态sider 源码而ThemedLayout也会根据sm断点调整内容区内边距layout 源码无需额外配置。小结与下一步本步骤完成后应用已被一个定制化的布局包裹包含侧边栏展示 Products 菜单与 Logout 按钮、顶部用户信息区和主内容区且应用标题已用一行代码更新为 Awesome Project。其余插槽Header、Sider、Footer、OffLayoutArea均可按相同方式定制。按照教程的整体节奏下一步将把各 action 组件重构为使用 Ant Design 的表单与表格。参考仓库中的相关文件教程文档layout 教程ThemedLayout 实现index.tsxThemedTitle 实现title/index.tsxThemedSider 实现sider/index.tsxThemedHeader 实现header/index.tsx布局类型定义ui-types layout.tsx【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考