优维低代码：Transform 数据转换_低代码中的transform-优快云博客

优维低代码技术专栏介绍了数据转换组件Transform的使用，旨在统一不同构件的数据逻辑。Transform用于处理dataSource+fields的约定，支持在useResolves和子构件渲染中转换数据。通过示例展示了如何配置和使用Transform，包括占位符@{...}

导语

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

连载第十七期

《高级指引：Transform 数据转换》

▽

在 Brick Next 中， dataSource+fields 是我们的开发者实践出来的不成文的约定，但是由于没有事先强制约定及深入调研，它的实现在不同的构件里虽然看起来相似，实际则各不相同，这给相关构件的下游使用者来说非常困惑，因此急需统一这些数据转换逻辑。

但由于 Storyboard 是声明式的，它并不擅长做逻辑处理，加上还有构件自行渲染构件并转换数据的场景，我们需要兼顾它们。

因此，我们提供了一套统一的数据转换 transform 模式，它同时用在 useResolves 和构件自行渲染构件并传递和转换数据的场景里。对于后者，我们提供统一的在容器构件中渲染子构件的 React Component: <BrickAsComponent>。

# 示例

例如 useResolves 里可以这样使用：

useResolves:  useProvider: "your.provider"  transform:    descriptions:      - label: "Username"        value: "@{name}"      - label: "Email"        value: "@{email}"

现在推荐使用 Evaluate Placeholders 求值占位符。

transform 是定义了 propertyName => propertyValue 的键值对，它定义了数据请求完成后，将以怎样的形式转换成 properties 输出到构件上。其中 @{...} 是和参数注入类似的占位符，关于它的更多信息，请查看本文下一节内容。

例如对于上述配置，假设 provider 提供的数据为：{ name: "Eve", email: "eve@example.com" }，那么该构件将收到属性：

properties:  descriptions:    - label: "Usernam