react-admin 软删除实践：用 `＜ShowDeletedBase＞` 无头组件渲染已删除记录详情

前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载导读在 react-adminEnterprise Edition的软删除soft delete功能集中ShowDeletedBase是面向已删除记录详情展示的无头headless组件它替代常规的ShowBase以完全自定义的方式渲染被删除记录的内容并向下层组件提供与ShowBase一致的ShowContext。阅读本文后你将掌握如何在自定义回收站页面中组合DeletedRecordsListBase、DeletedRecordRepresentation与ShowDeletedBase复现并扩展官方文档中的完整示例同时理解其底层数据流dataProvider.getOneDeleted()与 react-query与权限约束。一、功能定位为什么要用ShowDeletedBase在 react-admin 的软删除生态中常规的ShowBase通过dataProvider.getOne()获取记录并放入ShowContext用于构建完全自定义的展示页参见 ShowBase 文档。而删除后的记录无法再通过getOne()读取——它需要专用的dataProvider.getOneDeleted()数据方法。ShowDeletedBase正是为这一场景设计的替代品它替代ShowBase专门用于展示一条已删除记录它向下层 children 提供与ShowBase完全相同的ShowContext因此ShowBase能用的 children 组件如WithRecord、TextField等在这里同样可用作为无头组件它不渲染任何默认布局、标题或操作按钮把展示方式完全交给开发者。与同系列的ShowDeleted见 docs/ShowDeleted.md对应完整版Show的替代品相比ShowDeletedBase更轻量、更灵活前者适合配合DeletedRecordsList的detailComponents弹窗使用而ShowDeletedBase适合嵌入DeletedRecordsListBase的自定义列表以纯手写 UI 展示详情。注意ShowDeletedBase属于 react-admin Enterprise Edition 功能需要有效的企业版订阅才能使用源码位于闭源的react-admin/ra-core-ee包中本文档为其官方文档见 docs_headless/src/content/docs/ShowDeletedBase.md。二、安装react-admin/ra-core-eeShowDeletedBase、DeletedRecordsListBase、DeletedRecordRepresentation以及DeletedRecordType类型均从react-admin/ra-core-ee导出。安装方式与其他 react-admin 包一致npm install --save react-admin/ra-core-ee # 或 yarn add react-admin/ra-core-ee该包是 Enterprise Editionreact-admin/*系列的组成部分与开源版 react-admin 中的ra-core、ra-ui-materialui等包协同工作。示例中还会从开源包导入CoreAdmin、CustomRoutes、WithRecord、WithListContext等基础组件。三、完整用法示例自定义回收站详情视图官方文档给出了一个端到端可运行的示例完整覆盖了删除记录列表 → 点击查看详情 → 展示已删除记录内容的完整链路import { CoreAdmin, CustomRoutes, WithRecord } from ra-core; import { Route } from react-router-dom; import { DeletedRecordsListBase, DeletedRecordRepresentation, ShowDeletedBase, type DeletedRecordType } from react-admin/ra-core-ee; export const App () ( CoreAdmin ... CustomRoutes Route path/deleted element{ DeletedRecordsListBase WithListContext render{({ isPending, data }) isPending ? null : ( ul {data.map(record ( li key{record.id} DeletedItem record{record} / /li ))} /ul )} / /DeletedRecordsListBase } / /CustomRoutes /CoreAdmin ); const DeletedItem ({ record }: { record: DeletedRecordType }) { const [showDetails, setShowDetails] React.useState(false); return ( divstrong{record.resource}/strong/div DeletedRecordRepresentation record{record} / div button onClick{() setShowDetails(true)}Details/button /div {showDetails ? ( ShowDeletedBase record{record} WithRecord render{record p{record.title}/p} / WithRecord render{record p{record.description}/p} / button onClick{() setShowDetails(false)}Close/button /ShowDeletedBase ) : null} / ) }示例的关键点拆解列表层DeletedRecordsListBase通过dataProvider.getListDeleted()获取已删除记录列表并以ListContext提供给 childrenWithListContext从中解构出isPending与data进行渲染。它自带排序、筛选与分页能力详见 DeletedRecordsListBase 文档。单条摘要层record的类型是DeletedRecordType其结构与useDeletedRecordsListController的返回值一致形如{ id: 123, resource: posts, deleted_at: 2025-03-25T12:32:22Z, deleted_by: test, data: { ...原记录字段 } }——resource标识来源资源data保存被删除时的原始记录内容deleted_by/deleted_at记录操作者与删除时间参见 useDeletedRecordsListController 文档。DeletedRecordRepresentation负责渲染记录的表征record representation详见 DeletedRecordRepresentation 文档。详情层点击 Details 后将record传入ShowDeletedBase record{record}其内部会建立ShowContext使WithRecord能够读取到被删除记录的原始字段record.title、record.description。注意由于data字段存放原记录内容WithRecord中回调收到的record参数即为原始记录对象可直接按字段名访问。四、Props 全解官方文档对ShowDeletedBase的 Props 给出了精炼的表格完整整理如下PropRequiredTypeDefaultDescriptionchildrenRequiredElement用于渲染已删除记录内容的组件如WithRecord、SimpleShowLayout等。recordOptionalRaRecord要展示的已删除记录。若未提供则使用最近的RecordContext中的记录。4.1children必填children是渲染已删除记录的实际内容。由于ShowDeletedBase建立的是与ShowBase相同的ShowContext你可以自由组合各类上下文感知组件WithRecord以 render prop 形式接收当前记录实现完全自定义的字段渲染开源版展示组件如TextField、SimpleShowLayout它们通过useRecordContext()读取记录只要包在ShowDeletedBase内即可正常工作任意自定义按钮、交互元素在官方示例中Details / Close 按钮就与字段渲染混排在同一 children 树中。4.2record可选record用于显式指定要展示的已删除记录。两个常见使用场景列表详情联动像官方示例那样从WithListContext的data中取出DeletedRecordType对象后直接传入省略传参若组件外层已经存在RecordContext例如在DeletedRecordsList的行上下文中可省略record组件会自动从最近的RecordContext读取记录。五、底层原理数据从哪来ShowDeletedBase本身是展示型无头组件它自身的记录数据通过recordprop 或RecordContext提供但在更常见的场景中不手动传入 record按 id 获取已删除记录这一数据获取动作由配套 hook 完成底层数据方法为dataProvider.getOneDeleted()对应 hook 为useGetOneDeleted。该 hook 在组件挂载时调用dataProvider.getOneDeleted()按 id 查询单条已删除记录并返回{ data, isPending, error, refetch }它的 react-query query key 为[getOneDeleted, { id: String(id), meta }]meta参数可选可向 data provider 传递字段选择等附加信息返回的data同样符合DeletedRecordType结构可通过deletedRecord.data.username、deletedRecord.deleted_by等方式访问原始记录与删除元信息ShowDeletedBase提供的ShowContext与开源版ShowBase其背后是useShowControllerhook保持同一形态这正是 children 组件可以无差别复用的根本原因——从组件树契约上看展示一条被删除的记录与展示一条普通记录对 UI 层是透明的。从源码结构看可以推断react-admin/ra-core-ee内部会将record/RecordContext的记录放入ShowContext并复用 react-admin 的上下文机制完成数据下发由于该包闭源具体实现细节以官方文档描述为准。六、安全与权限约束虽然ShowDeletedBase本身只负责渲染但它所在的删除记录页面整体受到 react-admin 企业版的访问控制约束。以同系列的useDeletedRecordsListController/DeletedRecordsListBase为例两者同属ra-soft-delete能力集默认要求用户已认证匿名访问会被重定向到登录页可通过disableAuthentication关闭见 DeletedRecordsListBase 文档若 authProvider 实现了访问控制Access Control列表控制器会调用authProvider.canAccess()参数为{ resource: ra-soft-delete, action: list_deleted_records }无权限用户将被重定向到 Access Denied 页面见 useDeletedRecordsListController 文档。因此在部署ShowDeletedBase时建议将详情展示路由同样纳入上述鉴权体系确保查看已删除记录与列出已删除记录的权限口径一致。七、与相关组件的协作全景ShowDeletedBase不是孤立组件它处于 react-admin 软删除功能集的详情展示一环。一张完整的能力地图如下环节组件 / Hook数据方法上下文文档已删除记录列表DeletedRecordsListBase/useDeletedRecordsListControllergetListDeleted()ListContextDeletedRecordsListBase单条获取useGetOneDeletedgetOneDeleted()直接返回值useGetOneDeleted单条表征DeletedRecordRepresentation读取recordRecordContextDeletedRecordRepresentation详情展示无头ShowDeletedBase读取record/RecordContextShowContextShowDeletedBase详情展示完整版ShowDeleted上下文注入ShowContextShowDeleted软删除 data providerSoftDeleteDataProvidergetListDeleted/getOneDeleted等-SoftDeleteDataProvider选型建议追求完全自定义、嵌入式的详情视图如手写ulWithRecord或内嵌在列表行中展开时选ShowDeletedBase希望开箱即用的弹窗详情配合DeletedRecordsList的detailComponents与DeletedRecordsTable行点击时选ShowDeleted。两条路线共用同一ShowContext契约迁移成本很低——children 组件可以原样复用。八、小结ShowDeletedBase是 react-admin Enterprise Edition 软删除能力中详情展示一环的轻量选择它以ShowBase同款的无头形态与ShowContext契约为已删除记录提供完全自定义的渲染入口配合DeletedRecordsListBase、DeletedRecordRepresentation与WithRecord即可在不依赖任何默认布局的前提下构建出贴合业务需求的回收站详情页。理解其record来源 ShowContext下发 getOneDeleted数据通路的三角结构是安全、正确地使用它的关键。赞分享前端UI组件【免费下载链接】react-adminA frontend Framework for single-page applications on top of REST/GraphQL APIs, using TypeScript, React and Material Design项目地址https://gitcode.com/gh_mirrors/re/react-admin点击查看免费下载相关推荐react-admin ShowDeleted 组件指南在删除记录列表中安全展示已删除数据react admin ShowDeleted 组件指南在删除记录列表中安全展示已删除数据 ShowDeleted 是 react admin 软删除s前端UI组件react-admin 软删除实战深入掌握 DeletedRecordsList 组件react admin 软删除实战深入掌握 DeletedRecordsList 组件 DeletedRecordsList 是 react admin前端UI组件Wuthering Waves Model Importer终极3D模型加载工具完整指南Wuthering Waves Model Importer终极3D模型加载工具完整指南 Wuthering Waves Model Importer简称W前端UI组件上一篇Blackbone深度解析Windows内存操作与进程防护技术实现原理下一篇Effect ManagedRuntime 支持 await usingSymbol.asyncDispose 变更集与资源自动释放机制解读创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考