企业官网建设流程全解析

lowcode-engine 如何配置渲染唯一标识 key 避免同类组件切换时表单值串值

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

在 lowcode-engine 的可视化编辑器（Demo）中，用「是否渲染」条件切换两个同类表单组件（例如两个文本框）时，容易出现这种问题：页面上显示的组件已经切换了，但提交数据时，其中一个字段的值却是切换前那个组件的输入值，即表单值串值。本文基于 FAQ：渲染唯一标识（key） 中的真实案例，说明如何给组件配置「渲染唯一标识」来消除这个问题。

问题现象：切换后提交，字段值来自被复用的组件

FAQ 中的案例页面结构如下：

• 一个「爱好」下拉选择组件，取值如「游戏」「运动」；
• 两个文本框：「最喜欢的游戏」和「最喜欢的运动」，根据「爱好」的选择二选一显示；
• 一个「提交」按钮。

如果只配置了条件切换、没有配置渲染唯一标识，页面行为是这样的：切换爱好时下方文本框确实会跟着切换，看起来一切正常；但点击提交后发现，即使当前选择的是「运动」，提交数据里的sport字段拿到的却是「最喜欢的游戏」里填的值。

原因是：在进行文本框组件切换时，由于没有设置 key，底层会「复用」切换之前的组件实例，新显示出来的文本框仍然带着上一个组件的表单值。

原理与配置位置

「渲染唯一标识」（key）和 React 中组件的key属性原理一致，都是为了在渲染场景或组件切换的场景中唯一标识一个组件。key 不同，切换时就不会复用旧组件实例，表单值自然不会串。

该配置项位于组件右侧配置面板的「高级」Tab 中。「高级」区域包含条件渲染（是否渲染）与 key 的设置，参见 画布使用说明。在 低代码协议说明 中，「是否渲染」对应节点的condition字段（渲染条件，Boolean，默认true，支持变量表达式），「渲染唯一标识」则用于在条件切换和循环场景下区分同类组件。

操作步骤

按 FAQ 给出的案例，完整配置顺序如下：

1. 增加变量数据源hobby：用于保存「爱好」当前选择的值。
2. 配置「最喜欢的游戏」文本框：
   • 表单标识设置为game；
   • 「是否渲染」绑定变量表达式state.hobby === '游戏'。
3. 配置「最喜欢的运动」文本框：
   • 表单标识设置为sport；
   • 「是否渲染」绑定变量表达式state.hobby === '运动'。
4. 给「爱好」下拉组件设置onChange动作，在切换时更新hobby变量。
5. 给「提交」按钮绑定onClick动作，用于读取两个文本框的值。
6. 关键一步：分别选中「最喜欢的游戏」和「最喜欢的运动」两个组件，在右侧面板的「高级」Tab 中为它们各自配置不同的「渲染唯一标识」。

第 1～5 步只完成条件切换，不做第 6 步时就是前面描述的串值现象。两个组件的渲染唯一标识必须互不相同，引擎才能把切换识别为「卸载旧组件、挂载新组件」，而不是复用旧实例。

验证方式

配置完成后按原路径复现一次：

1. 「爱好」选择「游戏」，在「最喜欢的游戏」文本框输入内容；
2. 将「爱好」切换为「运动」，此时显示「最喜欢的运动」文本框；
3. 点击「提交」，检查提交数据。

未配置 key 时，FAQ 记录的现象是：选择「运动」提交后，sport字段是「最喜欢的游戏」的值；为两个组件配置渲染唯一标识后，切换即对应挂载新的组件实例，各文本框的值只来自自身，sport与game字段不再互相串值。

适用边界

• 该配置项一般配合「是否渲染」和「循环」功能使用：同类组件按条件二选一显示、或按循环数据渲染多个同类组件时，都需要通过渲染唯一标识区分它们。
• 如果画布上不存在同类组件切换（或循环渲染多个同类组件）的场景，单独设置 key 与否不影响表单取值。
• 本例基于 Demo 编辑器的配置面板操作；condition等字段含义以 lowcode-spec.md 中的节点描述为准。

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