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}