Schema 渲染
核心组件
Schema 渲染相关组件包括：
提供 schema 渲染所需的上下文
用于扩展 components 和 scopes，非必须
用于渲染 schema，必须用在 内部
什么是 scope？
scope 指的是 schema 内可用的变量或函数。例如以下例子的函数 t() 需要注册到 scope 里，才能正确渲染 title
1<SchemaComponent
2 scope={{ t }}
3 schema={{
4 title: '{{t("Hello")}}',
5 }}
6>
注册 components 和 scopes
SchemaComponentProvider、SchemaComponentOptions 和 SchemaComponent 都可以注册 components 和 scopes。区别在于：
SchemaComponentProvider 提供最顶层的上下文
SchemaComponentOptions 用于局部上下文的替换和扩展
SchemaComponent 为当前 schema 的上下文
1<SchemaComponentProvider components={{ ComponentA }}>
2 <SchemaComponent components={{ ComponentB }} schema={schema1}>
3 <SchemaComponent components={{ ComponentC }} schema={schema2}>
4 <SchemaComponentOptions components={{ ComponentD }}>
5 <SchemaComponent components={{ ComponentE }} schema={schema3}>
6 <SchemaComponent components={{ ComponentF }} schema={schema4}>
7 </SchemaComponentOptions>
8</SchemaComponentProvider>
- schema1 里可以使用 ComponentA、ComponentB
- schema2 里可以使用 ComponentA、ComponentC
- schema3 里可以使用 ComponentA、ComponentD、ComponentE
- schema4 里可以使用 ComponentA、ComponentD、ComponentF
在 Application 里使用
Tachybase 客户端的 Application 的 Providers 内置了 SchemaComponentProvider 组件
1class Application {
2 // 默认提供的 Providers
3 addDefaultProviders() {
4 this.addProvider(SchemaComponentProvider, {
5 scopes: this.scopes
6 components: this.components,
7 });
8 }
9}
最终渲染的组件结构如下:
1<Router>
2 {/* 路由的 Context Provider */}
3 <SchemaComponentProvider components={app.components} scopes={app.scopes}>
4 {/* 其他自定义 Provider 组件 - 开始标签 */}
5 <Routes />
6 {/* 其他自定义 Provider 组件 - 结束标签 */}
7 </SchemaComponentProvider>
8</Router>
应用内部使用时，无需再套 SchemaComponentProvider，直接用 SchemaComponent 就可以了
在应用的生命周期方法内可以使用 app.addComponents() 和 app.addScopes() 扩展全局的 components 和 scopes。
1class PluginHello extends Plugin {
2 async load() {
3 this.app.addComponents({
4 // 扩展的组件
5 });
6 this.app.addScopes({
7 // 扩展的 scope
8 });
9 }
10}
