企业官网建设流程全解析

lowcode-engine Procode 物料如何注入配置以调用 reloadDataSource 数据源方法

【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine

在 lowcode-engine 中开发 Procode 物料时，常需要在物料组件内部主动触发数据源重新加载。引擎在组件容器实例（this）上约定了this.reloadDataSource()这一容器 API（返回<Promise>，用于重载初始化异步数据请求，见 lowcode-spec），而IDataSourceEngine的reloadDataSource()同样是"重新加载所有的数据源"（见 datasourceEngine）。对于 Procode 物料，由于组件本身不直接持有引擎运行时上下文，需要给物料注入一段configure配置，把this.reloadDataSource通过 JSFunction 形式透出到组件 props 上，再在组件内调用。以下内容整理自 Procode 物料如何调用数据源方法，给出完整配置与排查路径。

给物料注入 reloadDataSource 配置

在物料的configure中加入如下字段配置。name为reloadDataSource，initialValue返回一个 JSFunction 类型的值，其内容为function(){ return this.reloadDataSource; }，即把容器实例上的reloadDataSource方法透出来：

{ title: { label: { type: 'i18n', 'en-US': 'reloadDataSource', 'zh-CN': 'reloadDataSource', }, }, name: 'reloadDataSource', setter: 'StringSetter', initialValue: () => ( { "type": "JSFunction", "value": "function(){ return this.reloadDataSource; }" } ), }

注入这段配置后，编辑器会默认给物料提供reloadDataSource对应的参数，组件端即可从 props 上拿到该方法。

在物料组件中调用该方法

配置生效后，在物料组件内通过 props 取出方法并调用：

const reloadDataSource = props.getReloadDataSource()

props.getReloadDataSource()返回的即为上面 initialValue 中透出的this.reloadDataSource，可直接作为 Promise 方式调用以重新加载数据源。

可选：不让该配置在配置面板中展示

如果这个字段只是为了在组件内部取到方法、不希望它出现在属性配置面板里，在字段配置中加上condition: () => false即可。完整示例：

{ title: { label: { type: 'i18n', 'en-US': 'reloadDataSource', 'zh-CN': 'reloadDataSource', }, }, name: 'reloadDataSource', setter: 'StringSetter', condition: () => false, initialValue: () => ( { "type": "JSFunction", "value": "function(){ return this.reloadDataSource; }" } ), },

可选：通过元数据管道函数全局生效

如果需要对所有（或一批）物料统一注入这段配置，而不是逐个物料手工添加，可以用registerMetadataTransducerAPI 在物料信息初始化时修改元数据。该 API 注册物料元数据管道函数，签名与示例见 material API 文档 registerMetadataTransducer。注意：如果物料带有snippets相关配置，通过 transducer 全局生效时也需要一并修改 snippets 中的相关配置。

配置没有生效时如何排查

按 FAQ 给出的排查路径：

1. 先查看组件中的 schema：确认对应配置是否已经正确设置到组件 schema 的 props 上。文档提示检查方式是查看组件中的 schema，确认getReloadDataSource是否带上正确的 JSFunction 值。
2. 检查 snippets 中是否有默认值：没有正确设置上的一个可能原因是snippets中没有默认值。需要在 snippets 的schema.props中加上默认的参数配置，示例如下（其中ProField与 props 内容为文档示例，实际按你的物料组件名与默认属性替换）：

const snippets: Snippet[] = [ { title: 'Field', screenshot: '', schema: { componentName: 'ProField', props: { type: 'textarea', value: '我是测试', getReloadDataSource: { "type": "JSFunction", "value": "function(){ return this.reloadDataSource; }" } }, }, }, ];

小结

完成路径是：在物料configure中注入name: 'reloadDataSource'的 JSFunction 字段（可选加condition: () => false隐藏）→ 组件内通过props.getReloadDataSource()取得方法调用 → 若不生效，按"schema 是否正确设置、snippets 是否有默认值"两项检查 → 需要批量覆盖时改用registerMetadataTransducer在元数据初始化阶段统一注入。

【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine