Refine 3.x Chakra UI ShowButton 完整指南从列表页跳转到详情页的按钮实现与源码剖析【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refineShowButton是 Refine 为 Chakra UI 提供的预置导航按钮组件用于在列表页中将用户重定向到当前记录的详情show页面。本文以 Refine 3.xx 版本文档为核心结合仓库内pankod/refine-chakra-ui的真实源码与测试用例系统讲解其用法、recordItemId、resourceNameOrRouteName、hideText、accessControl等核心属性并深入剖析其底层基于useNavigation的show方法与useShowButtonhook 的实现原理帮助你直接复用并可按需 swizzle 定制。ShowButton 是什么ShowButton基于 Chakra UI 的Button中的show方法完成跳转。它的典型使用场景是在列表页的操作列中为每一行记录渲染一个查看详情按钮点击后进入/{resource}/show/{id}路由。从源码实现看show/index.tsxShowButton接收resource、recordItemId、hideText、accessControl、svgIconProps、meta、children、onClick等属性并将它们传给核心 hookuseShowButtonconst { to, label, title, hidden, disabled, LinkComponent } useShowButton({ resource: resourceNameFromProps, id: recordItemId, accessControl, meta, });由 hook 计算出的to目标路由、label按钮文案、title提示文本以及hidden/disabled状态最终决定渲染方式hideText为true时渲染为只带眼睛图标的IconButton否则渲染为带IconEye左图标的普通Button按钮文字为children ?? label默认即 Show。整个按钮被包裹在LinkComponent即 routerProvider 提供的链接组件中因此点击后走的是 SPA 路由跳转而非整页刷新。快速上手在列表页使用 ShowButton以下示例来自 show.md展示了如何在基于pankod/refine-react-table的表格中为每一行渲染一个ShowButtonimport { List, TableContainer, Table, Thead, Tr, Th, Tbody, Td, ShowButton, } from pankod/refine-chakra-ui; import { useTable, ColumnDef, flexRender } from pankod/refine-react-table; const PostList: React.FC () { const columns React.useMemoColumnDefIPost[]( () [ { id: id, header: ID, accessorKey: id, }, { id: title, header: Title, accessorKey: title, }, { id: actions, header: Actions, accessorKey: id, cell: function render({ getValue }) { return ShowButton recordItemId{getValue() as number} /; }, }, ], [], ); const { getHeaderGroups, getRowModel } useTable({ columns }); return ( List TableContainer Table variantsimple whiteSpacepre-line Thead {getHeaderGroups().map((headerGroup) ( Tr key{headerGroup.id} {headerGroup.headers.map((header) ( Th key{header.id} {!header.isPlaceholder flexRender( header.column.columnDef.header, header.getContext(), )} /Th ))} /Tr ))} /Thead Tbody {getRowModel().rows.map((row) ( Tr key{row.id} {row.getVisibleCells().map((cell) ( Td key{cell.id} {flexRender(cell.column.columnDef.cell, cell.getContext())} /Td ))} /Tr ))} /Tbody /Table /TableContainer /List ); }; interface IPost { id: number; title: string; }在这个示例中actions列通过getValue()取出当前行的id并将其作为recordItemId传给ShowButton。别忘了在Refine的resources中注册对应的show页面const App () { return ( Refine notificationProvider{RefineChakra.notificationProvider()} resources{[ { name: posts, list: PostList, show: ShowPage, }, ]} / ); };基础环境配置文档中的实时示例依赖以下环境配置使用RefineReactRouterV6作为 routerProviderRefineSimpleRest作为 dataProvider并包裹在RefineChakra.ChakraProvider与refineTheme主题之下const { default: routerProvider } RefineReactRouterV6; const { default: simpleRest } RefineSimpleRest; setRefineProps({ routerProvider, dataProvider: simpleRest(https://api.fake-rest.refine.dev), Layout: RefineChakra.Layout, Sider: () null, catchAll: RefineChakra.ErrorComponent /, });核心属性详解recordItemIdrecordItemId用于将记录 id 追加到路由路径的末尾。例如ShowButton colorSchemeblack recordItemId123 /点击按钮后会触发useNavigation的show方法将应用重定向到/posts/show/123。需要特别注意的是ShowButton默认会从路由中读取 id 信息。也就是说如果你在 show 页面如/posts/show/1上渲染ShowButton /而不传recordItemId组件会通过useRouterContext().useParams()自动解析当前路由中的id。这一行为在测试用例中也有明确验证见下文路由跳转的测试验证。resourceNameOrRouteName重定向端点resourceNameOrRouteName/show由resourceNameOrRouteName属性决定。默认情况下ShowButton使用 resource 对象的name属性作为点击后的跳转端点。当需要跳转到其他资源时可显式指定ShowButton colorSchemeblack resourceNameOrRouteNamecategories recordItemId2 /此时点击按钮会触发show方法并跳转到/categories/show/2。对应的resources配置如下resources{[ { name: posts, list: MyShowComponent }, { name: categories, show: ShowPage }, ]}hideTexthideText用于控制是否显示按钮文字。当为true时按钮只显示图标眼睛图标适合空间紧凑的表格操作列ShowButton colorSchemeblack recordItemId123 hideText /从源码看show/index.tsxhideText模式下渲染IconButton并透传variantoutline、aria-label{label}、data-testid等属性保证无障碍与测试友好。accessControlaccessControl属性用于控制权限校验行为仅在向Refine/提供了accessControlProvider时生效enabled是否跳过权限校验hideIfUnauthorized当用户无权限访问该资源时是否隐藏按钮。import { ShowButton } from pankod/refine-chakra-ui; export const MyListComponent () { return ( ShowButton accessControl{{ enabled: true, hideIfUnauthorized: true }} / ); };此外ShowButton也接受 Chakra UIButton的全部原生属性colorScheme、size、disabled、hidden、onClick等这些属性通过...rest透传给底层按钮组件。底层原理useShowButton 与 useNavigationuseShowButton 的调用链ShowButton之所以能拿到跳转目标与权限状态全部依赖核心包中的useShowButtonhook。从 packages/core/src/hooks/button/index.tsx 可以看到useShowButton只是对通用导航按钮 hook 的封装export const useShowButton ( props: PrettifyOmitNavigationButtonProps, action, ) useNavigationButton({ ...props, action: show });即通过action: show复用统一的useNavigationButton逻辑计算路由、权限与文案。类似的还有useEditButtonaction: edit、useCloneButton、useListButton等这说明 ShowButton 与 EditButton、CloneButton、ListButton 共享同一套导航按钮基础设施。useNavigation 的 show 方法ShowButton的跳转行为最终落到useNavigation的show方法上。根据 useNavigation.md 的说明const { show } useNavigation(); show(posts, 1); // It navigates to the /posts/show/1 pageshow方法接收资源名与记录 id导航到/{resource}/show/{id}页面它还支持第三个可选参数typeHistoryType用于控制 push / replace 等导航行为。此外还有配套的showUrl方法仅返回 URL 而不执行跳转const { showUrl } useNavigation(); showUrl(posts, 1); // It returns the /posts/show/1 URL这两者的函数签名分别为方法说明签名show跳转到详情页( resource: string, id: BaseKey, type: HistoryType ) voidshowUrl返回详情页 URL( resource: string, id: BaseKey ) string路由跳转的测试验证ShowButton的行为由跨 UI 库共用的测试套件保障。在 packages/ui-tests/src/tests/buttons/show.tsx 中通过buttonShowTests覆盖了以下关键场景默认渲染成功按钮文案为 Show 且未被禁用传入disabled后按钮禁用且点击不会触发onClick传入hidden后按钮不渲染组件带有正确的data-testidRefineButtonTestIds.ShowButtonhideText模式下不渲染文字、只显示图标点击按钮触发onClick回调路由跳转验证在列表路由/posts下渲染ShowButton recordItemId1 /点击后链接href为/posts/show/1从详情页读取 id在/posts/show/1路由下渲染ShowButton /不传 id生成的链接依然是/posts/show/1印证了默认从路由读取 id的行为自定义资源跳转ShowButton resourcecategories recordItemId1 /生成/categories/show/1。这些测试同时覆盖了 accessControl 的多种组合全局配置 vs 组件属性、enableAccessControl、hideIfUnauthorized、权限拒绝时的禁用与 title 提示等是理解accessControl语义的第一手资料。Chakra UI 侧的实现只需一行绑定即可接入这套公共测试show/index.spec.tsximport { buttonShowTests } from refinedev/ui-tests; import { ShowButton } from ./; describe(Show Button, () { buttonShowTests.bind(this)(ShowButton); });Swizzle 定制与类型说明使用 refine CLI 进行 swizzle原文档标记了swizzle: true意味着你可以使用refine CLI将该组件复制到自己的项目中进行完全定制例如改变默认图标、调整按钮文案或包装自定义逻辑。执行 swizzle 后组件会以可编辑源码的形式落入你的项目不再受库版本升级影响。ShowButtonProps 类型在 packages/chakra-ui/src/components/buttons/types.ts 中Chakra UI 版的ShowButtonProps定义如下export type ShowButtonProps Omit RefineShowButtonProps ButtonProps, { svgIconProps?: OmitIconProps, ref; } , ignoreAccessControlProvider ;也就是说它继承自refinedev/ui-types的RefineShowButtonProps泛型参数为 Chakra UI 的ButtonProps并额外支持svgIconProps用于定制眼睛图标的大小与样式源码中默认size{20}。类型中剔除的ignoreAccessControlProvider用于强制接入权限体系。总结ShowButton是 Refine 3.x Chakra UI 项目中列表 → 详情导航的标准解法开箱即用无需手写useNavigation().show(...)与路由拼接一行ShowButton recordItemId{id} /即可智能默认不传recordItemId时自动从当前路由解析 id适配列表页与详情页两种使用场景权限友好配合accessControlProvider可实现无权限时禁用并显示原因或直接隐藏按钮完全可定制既可通过 Chakra UI 的ButtonProps自由调整外观也可通过 refine CLI swizzle 获得源码级控制权。若需深入了解其底层导航机制可继续阅读 useNavigation 文档、ShowButton 源码、核心 useShowButton hook 以及 公共按钮测试套件。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考