内置引擎组件

内置 Form 引擎的配套组件实现了其各类型成员的绘制、可视化配置以及预览功能， 还提供了一套表单绘制组件和配置组件。本章中我们将逐一介绍这些组件的作用和用法。

成员组件

Member Renderer

Member Renderer 的作用是提供成员组件的统一绘制入口，该组件会根据需要绘制的成员的类型， 动态调用对应命名空间下的的成员组件，而无需开发人员手动编写成员类型与组件的匹配条件。 在内置引擎中，无论是已集成的成员组件还是自定义注册的成员组件， Member Renderer 对命名空间的约定都是一致的，均为: <React/Vue>.Section.<MemberType>。 下面，我们通过具体示例来了解该组件的用法。

Member Previewer

Member Previewer 的作用是绘制一个只读状态的成员组件，通常用于绘制配置状态下的成员。 默认情况下，该组件默认会直接包装 Member Renderer， 但可通过向 <React/Vue>.Section.<MemberType>.Previewer 命名空间下注册自定义组件， 实现定制化的预览效果。具体用法如下。

Member Prop Editor

Member Prop Editor 的作用是提供成员属性可视化配置组件的统一入口，在内置引擎中， 无论是已集成的成员组件还是自定义注册的成员组件，Member Prop Editor 都可以调用一套已默认提供用来配置成员属性的组件。 与此同时，还支持注册自定义属性配置组件，查找的命名空间顺序如下:

<React/Vue>.Section.<MemberType>.PropEditor
<React/Vue>.Section.<MemberType>.PropEditor.<Property>
<React/Vue>.Section.Member.PropEditor.<Property>

如有定制化需求，可按照如上的命名空间顺序分别注册应用于特定类型成员的属性配置组件、 特定类型成员特定属性的配置组件，以及所有类型成员特定属性的配置组件。 在下面的代码片段中，我们展示了该组件的默认行为，并以定制应用于所有类型成员的 label 属性配置组件做例。

在 扩展内置引擎模型 的教程中， 我们提到过 Form.providers() 方法和 Form.validators() 方法在配套的组件中也起到了一定的作用。 Member Prop Editor 在内部便调用了这两个方法， 在绘制成员可引用范围列表时，调用了 Form.validators() 方法来查找可被引用的成员属性范围； 在绘制成员 validation 属性配置组件和 DSL 条件配置组件时， 调用了 Form.validators() 方法来查找成员的可用校验方法范围， 并向该方法的 options 对象参数中分别传递了 scope: 'validation' 和 scope: 'condition' 来区分两种场景。 简单来说就是，Member Prop Editor 遵循 Form.providers() 方法和 Form.validators() 的返回值， 来绘制相关的 UI 组件。

Member Editor

Member Editor 组件是基于 Member Prop Editor 的一个高级封装， 组件内部会调用 reactive#schema.for() 方法查找成员的 schema 定义， 并将定义中声明的属性分别使用 Member Prop Edior 绘制出配置组件。具体用法如下。

与上文提到过的其它组件类似，如果对某类型成员的 Member Editor 组件有定制化需求， 可通过向 <React/Vue>.Section.<MemberType>.Editor 命名空间中注册组件实现， 用法此处不再赘述。

表单组件

Form Renderer 可以将内置引擎创建的 Reactive 实例，直接绘制成一个可填写的表单。 与 Form Renderer 相对，Form Builder 可以将内置引擎创建的 Reactive 实例，直接绘制成一个可配置的表单。 具体用法，我们在 入门示例 中已介绍过， 读者可以结合本章内容进行回顾，体会表单组件与成员组件的关系。

小结

  • 内置 Form 引擎的配套组件实现了其各类型成员及表单的绘制、可视化配置和预览功能。
  • Member Renderer 的作用是提供成员组件的统一绘制入口。
  • Member Previewer 的作用是绘制只读状态的成员组件，该组件默认直接包装 Member Renderer。
  • Member Prop Editor 的作用是提供成员属性可视化配置组件的统一入口。
  • Member Editor 的作用是提供成员可视化配置组件的统一入口，是基于 Member Prop Editor 的一个高级封装。