formily 自定义组件读取字段 Schema 指南useFieldSchema 的原理与实战用法【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址: https://gitcode.com/gh_mirrors/fo/formily在 formily 的formily/react体系中useFieldSchema是自定义组件内读取当前字段 JSON Schema 信息的核心 Hook。它专门服务于 SchemaField / RecursionField 子树中的自定义组件让你能在渲染层直接拿到字段的 Schema 定义进而实现递归渲染、结构感知、动态表单等高级能力。读完本文你将掌握useFieldSchema的签名、使用边界、底层实现原理以及基于它的组件递归与结构筛选实战写法。概述useFieldSchema 是什么useFieldSchema是formily/react提供的 React Hook核心作用是在自定义组件中读取当前字段的 Schema 信息即声明该字段的 JSON Schema 结构。它与useField读取字段模型实例互补前者面向结构定义后者面向运行态字段对象。该 Hook 有严格的适用范围只能在SchemaField或RecursionField的子树中使用。因为其实现完全依赖 React ContextSchemaContext离开这两个组件挂载的 Provider 子树Context 值为空读取不到任何 Schema。签名与返回值interface useFieldSchema { (): Schema }无参数。返回formily/json-schema中的Schema类实例代表当前字段的 Schema 节点。Schema类的完整 API 可参考 Schema 文档注仓库中对应实现位于 packages/json-schema/src/schema.ts。Schema实例提供了toJSON()、mapProperties、filterProperties等结构化操作方法是后续递归渲染的基础。官方示例在自定义组件中打印当前字段 Schema文档给出的完整用例位于 packages/react/docs/api/hooks/useFieldSchema.mdimport React from react import { createForm } from formily/core import { FormProvider, createSchemaField, useFieldSchema } from formily/react const form createForm() const Custom () { const schema useFieldSchema() return ( code pre{JSON.stringify(schema.toJSON(), null, 2)}/pre /code ) } const SchemaField createSchemaField({ components: { Custom, }, }) export default () ( FormProvider form{form} SchemaField SchemaField.Object namecustom x-componentCustom x-component-props{{ schema: { type: object, properties: { input: { type: string, x-component: Custom, }, }, }, }} / /SchemaField /FormProvider )要点拆解createForm()创建 form 实例通过FormProvider注入到组件树。createSchemaField({ components: { Custom } })注册自定义组件Custom使其能作为x-component被 SchemaField 渲染。SchemaField.Object声明一个type: object的字段其x-component指向Custom并通过x-component-props传入一段嵌套的schema数据。在Custom组件内部调用useFieldSchema()拿到当前字段即custom这个 Object 字段的Schema实例调用schema.toJSON()序列化为普通 JSON 对象再格式化输出。运行后页面会展示custom字段完整的 Schema 结构含type、name、x-component等。toJSON()由formily/json-schema的 Schema 类实现测试中同样通过schema.toJSON()与快照比对来验证 Schema 序列化结果见 packages/json-schema/src/tests/schema.spec.ts。原理剖析一个 Hook 背后的 Context 机制useFieldSchema的实现极其精简完整源码位于 packages/react/src/hooks/useFieldSchema.tsimport { useContext } from react import { SchemaContext } from ../shared import { Schema } from formily/json-schema export const useFieldSchema (): Schema { return useContext(SchemaContext) }它所做的只是读取SchemaContext。该 Context 在 packages/react/src/shared/context.ts 中定义export const SchemaContext createContextSchema(null)同一个文件中还定义了SchemaMarkupContext、SchemaExpressionScopeContext、SchemaComponentsContext、SchemaOptionsContext等一批配套 Context分别承载 Schema 标记结构、表达式作用域、组件注册表和 SchemaField 工厂选项。ContextCleaner会在渲染流程中清理这些 Context置为undefined避免越界污染。从源码结构可以推断出以下几点使用规则只能在 SchemaField / RecursionField 子树内调用这两个组件负责在渲染阶段向SchemaContext注入当前字段的 Schema 节点子树之外 Context 值为null调用会返回空值。返回的是 Schema 实例而非普通对象可以直接调用Schema类的方法如toJSON()、mapProperties而x-component-props里传入的schema只是普通 JSON 数据需要编译后才能获得实例能力。Hook 与字段位置绑定每次调用拿到的都是当前所在位置的 Schema 节点同一组件被不同字段复用时各自读取到各自字段的定义。该 Hook 通过 packages/react/src/hooks/index.ts 对外统一导出与useForm、useField、useParentForm、useFormEffects、useExpressionScope并列属于formily/react标准 Hooks 集合。实战进阶用 useFieldSchema 驱动组件递归渲染useFieldSchema最常见的实战价值是与RecursionField配合实现自定义组件内继续递归渲染子 Schema。这在实现布局容器、表格、分组等复合组件时是刚需。在 packages/react/src/tests/schema.markup.spec.tsx 的测试用例中CustomObject组件通过useFieldSchema()取到当前节点 Schema再把它交给RecursionField继续向下渲染const CustomObject: React.FC () { const schema useFieldSchema() return ( div contenteditable="false">【免费下载链接】formily Cross Device High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3项目地址: https://gitcode.com/gh_mirrors/fo/formily创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考