refine Inferencer 实战在 Ant Design react-router 项目中基于 API 响应自动生成资源页面【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本文围绕 refine 教程中「Using Inferencer」这一实战步骤展开在基于 react-router 路由方案与 Ant Design UI 的 refine 应用中使用refinedev/inferencer包的AntdInferencer组件为categories资源自动生成列表页的预览界面与可复制源码。读完后你将掌握 Inferencer 的安装、resource/action等属性用法、资源与路由推断机制以及从源码层面理解它「取数 → 推断字段 → 生成代码 → 渲染预览」的完整流水线。Inferencer 的定位与适用边界Refine 的refinedev/inferencer包可以根据 API 的真实响应结构为资源页面脚手架式地生成初始代码。它的目标是减少手工编写 CRUD 视图的时间挂载组件后你会看到所指定资源、所指定 action 的视图预览以及生成组件的完整源码可以直接复制粘贴并根据自己的应用需求二次定制。需要特别注意官方文档给出的定位见 教程步骤文档生成的代码不保证完美可用需要人工检查与定制该工具是为本地开发提速设计的不建议用于生产环境。从源码看这一点有明确的技术支撑refinedev/inferencer导出的组件默认会在页面上附带代码查看器Code Viewer并且提供hideCodeViewerInProduction属性用于在生产模式下隐藏代码查看器与信息块组件——其类型定义中的注释也直接说明「Inferencer components are not meant to be used in production」见 types/index.ts。安装首先安装refinedev/inferencer包。Inferencer 可以为 refine 内置支持的多个 UI 库生成视图若要用某个 UI 库生成视图需要同时安装对应的依赖例如 Ant Design 需要refinedev/antd和antdnpm install refinedev/inferencerInferencer 支持的 UI 库包括Ant Design、Chakra UI、Material UI、Mantine以及无样式的 Headless 版本。这一点可以从包的源码目录结构直接得到印证——inferencers 目录 下按 UI 库拆分为五个子目录每个目录各自包含list.tsx、show.tsx、edit.tsx、create.tsx及对应的错误/加载组件packages/inferencer/src/inferencers/ ├── antd/ # AntdInferencer 及各 action 实现 ├── chakra-ui/ ├── headless/ # 无样式版本 ├── mantine/ └── mui/当前仓库中该包的版本为7.0.0见 package.json。基本用法按子路径导入对应 UI 库的 InferencerInferencer 包为每个 UI 库以子路径sub-path导出专属的 Inferencer 组件。以 Ant Design 为例需要从refinedev/inferencer/antd导入AntdInferencerimport { AntdInferencer } from refinedev/inferencer/antd; export const MyPage () { return AntdInferencer resourceproducts actionlist /; };在上例中我们用AntdInferencer为products资源生成列表视图action属性指定要生成的视图类型。可用的 action 有四种list、show、edit、create。结合 类型定义AntdInferencer接受的完整属性如下可以按需组合属性类型说明resource/namestring要推断的资源名二者写其一即可不传时会尝试从路由推断actionlist \| show \| edit \| create要生成的页面类型默认为listidstring \| number当action为show/edit时用于取单条记录不传时从 URL 解析fieldTransformer(field) InferField \| undefined \| null \| false自定义字段转换返回undefined/null/false可隐藏某字段返回新对象可修改accessor等metaRecordstring, Recordstring, any按资源标识传递 data provider 调用参数如 GraphQL 的gqlQueryhideCodeViewerInProductionboolean生产模式下隐藏代码查看器实战为 categories 资源生成列表页教程的应用中categories资源与products资源存在关联。下面按文档步骤用 Inferencer 为categories资源生成列表视图。第一步创建src/pages/categories/list.tsx先新建一个占位组件文件export const ListCategories () { return ( div h1Categories/h1 /div ); };第二步在/categories路由中挂载组件并注册资源更新src/App.tsx添加categories资源与对应路由import { Refine, Authenticated } from refinedev/core; import routerProvider, { NavigateToResource } from refinedev/react-router; import { ThemedLayout, ThemedTitle, useNotificationProvider, } 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; // highlight-next-line import { ListCategories } from ./pages/categories/list; 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} notificationProvider{useNotificationProvider} resources{[ { name: protected-products, list: /products, show: /products/:id, edit: /products/:id/edit, create: /products/create, meta: { label: Products }, }, // highlight-start // Were adding the categories resource to the resources array // This way, there will be a link to the categories list in the sidebar { name: categories, list: /categories, meta: { label: Categories }, }, // highlight-end ]} Routes Route element{ Authenticated keyauthenticated-routes redirectOnFail/login ThemedLayout Title{(props) ( ThemedTitle {...props} textAwesome Project / )} Outlet / /ThemedLayout /Authenticated } Route index element{NavigateToResource resourceprotected-products /} / Route path/products Route index element{ListProducts /} / Route path:id element{ShowProduct /} / Route path:id/edit element{EditProduct /} / Route pathcreate element{CreateProduct /} / /Route {/* highlight-start */} Route path/categories Route index element{ListCategories /} / /Route {/* highlight-end */} /Route Route element{ Authenticated keyauth-pages fallback{Outlet /} NavigateToResource resourceprotected-products / /Authenticated } Route path/login element{Login /} / /Route /Routes /Refine /AntdApp /ConfigProvider /BrowserRouter ); }这里做了两件事把ListCategories挂载到/categories路由把categories加入resources数组这样侧边栏会自动出现指向分类列表的链接。第三步在组件中挂载 Inferencer更新src/pages/categories/list.tsximport { AntdInferencer } from refinedev/inferencer/antd; export const ListCategories () { return ( AntdInferencer // resourcecategories // Were omitting this prop because its inferred from the route // actionlist // Were omitting this prop because its inferred from the route / ); };注意这里没有传resource和action——因为它们会从当前路由推断出来。此时访问/categories就能看到categories资源生成的列表视图随后复制生成代码并定制即可。源码解析resource 与 action 如何从路由推断「省略resource/action也能工作」这一行为可以直接在 antd/index.tsx 中验证。AntdInferencer是一个分发器const AntdInferencer: React.FCInferencerComponentProps ({ action: actionFromProps, id: idFromProps, ...props }) { const { action, id } useParsed(); switch (actionFromProps ?? action) { case show: return ShowInferencer {...props} id{idFromProps ?? id} /; case create: return CreateInferencer {...props} id{idFromProps ?? id} /; case edit: return EditInferencer {...props} id{idFromProps ?? id} /; default: return ListInferencer {...props} id{idFromProps ?? id} /; } };关键点它通过refinedev/core的useParsed()从 URL 中解析出action与id属性优先级为「显式传入 路由解析」即actionFromProps ?? action。由于路由/categories在resources中登记的list路径就是/categoriesrefine 能反推出当前是categories资源的list视图因此两个属性都可以省略。同理如果你为资源登记了show: /categories/:id之类的路径进入详情页时action会被解析为showid来自 URL 参数。该文件还导出了各 action 的独立组件AntdListInferencer、AntdShowInferencer、AntdEditInferencer、AntdCreateInferencer及其renderer便于在自定义场景下复用生成逻辑。源码解析取数、推断与代码生成流水线每个 UI 库的 Inferencer 都由同一个工厂函数createInferencer构建见 create-inferencer/index.tsx其配置项CreateInferencerConfig要求提供type、代码查看器、加载/错误组件以及一个把推断结果渲染成代码字符串的renderer。以 Ant Design 的列表推断器为例antd/list.tsx 的注册就是export const ListInferencer: InferencerResultComponent createInferencer({ type: list, additionalScope: [ [refinedev/antd, RefineAntd, { useTable, List, TagField, /* ... */ }], [antd, AntdPackage, { Table, Space }], ], codeViewerComponent: SharedCodeViewer, loadingComponent: LoadingComponent, errorComponent: ErrorComponent, renderer, });完整流水线可分为四步取数useInferFetch见 use-infer-fetch/index.tsx根据type选择 data provider 方法——list与create走dp.getList并保留整页数据datas用于多记录聚合推断show与edit走dp.getOneid优先取属性、其次取 URL 解析值字段推断拿到的记录会逐 key 交给组合后的字段推断器composeInferencers([...defaultElements, ...customElements])。内置推断器位于 field-inferencers 目录覆盖text、number、date、email、image、url、richtext、boolean、array、object、relation等类型随后经过字段转换器composeTransformers与用户传入的fieldTransformer做二次加工。对于列表/创建这类多记录场景inferMultipleRecords会对所有记录逐条推断并取每个字段出现次数最多的类型作为最终推断结果生成代码当加载完成后renderer收到{ resource, resources, fields, meta, isCustomPage, id, i18n }上下文产出完整组件源码字符串。以列表为例生成的代码是标准的useTableTable组合见 list.tsx 的 renderer 尾部其中syncWithLocation: true让分页、排序与 URL 同步若资源注册了canEdit/canShow/canDelete见 list.tsx还会生成包含EditButton、ShowButton、DeleteButton的操作列若存在关联字段还会生成useMany批量取关联数据的钩子代码渲染预览 展示源码生成的代码经过prepareLiveCode处理后交给LiveComponent基于 react-live在页面上实时渲染出真实 UI同时CodeViewerComponent展示去除隐藏标记后的源码供复制使用。这也是文档中「你会得到预览 生成组件的源码」的来源。生成的代码长什么样以 Ant Design 列表推断器为例给定一条包含多种字段类型的categories记录renderer 会按字段类型分发到不同的列生成器见 list.tsxtext/number生成普通Table.Columnimage列渲染ImageFieldemail/url列渲染EmailField/UrlFielddate列渲染DateFieldboolean列渲染BooleanFieldrichtext列用MarkdownField截断前 80 字符展示。最终产出形如import React from react; import { BaseRecord } from refinedev/core; import { useTable, List, /* ... */ } from refinedev/antd; import { Table, Space } from antd; export const ListCategories () { const { tableProps } useTable({ syncWithLocation: true, resource: categories, // 非路由资源时显式传入 }); return ( List Table {...tableProps} rowKeyid {/* 按推断出的字段类型生成的 Table.Column 列表 */} /Table /List ); };将复制下来的代码粘贴回src/pages/categories/list.tsx替换AntdInferencer再按业务需要调整列、按钮与校验就得到了一个可维护的手写列表页。小结与注意事项Inferencer 是「本地开发加速器」refinedev/inferencer配合对应 UI 库依赖安装后一行AntdInferencer /即可在资源路由上获得视图预览与完整源码resource/action/id均可省略、由路由自动推断见 antd/index.tsx。生成逻辑完全基于真实 API 响应list/create走getListshow/edit走getOne字段类型由内置推断器集合识别见 use-infer-fetch 与 field-inferencers。生成结果不保证完美关联关系、嵌套对象等复杂场景可能需要人工修正源码中甚至内置了「Cannot Render」的兜底列见 list.tsx官方明确不建议将其用于生产环境。按教程节奏掌握这一步之后下一环节是了解 refine CLI 及其能力可以把项目脚手架也交给工具链完成。【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考