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 给出的案例完整配置顺序如下增加变量数据源hobby用于保存「爱好」当前选择的值。配置「最喜欢的游戏」文本框表单标识设置为game「是否渲染」绑定变量表达式state.hobby 游戏。配置「最喜欢的运动」文本框表单标识设置为sport「是否渲染」绑定变量表达式state.hobby 运动。给「爱好」下拉组件设置onChange动作在切换时更新hobby变量。给「提交」按钮绑定onClick动作用于读取两个文本框的值。关键一步分别选中「最喜欢的游戏」和「最喜欢的运动」两个组件在右侧面板的「高级」Tab 中为它们各自配置不同的「渲染唯一标识」。第 15 步只完成条件切换不做第 6 步时就是前面描述的串值现象。两个组件的渲染唯一标识必须互不相同引擎才能把切换识别为「卸载旧组件、挂载新组件」而不是复用旧实例。验证方式配置完成后按原路径复现一次「爱好」选择「游戏」在「最喜欢的游戏」文本框输入内容将「爱好」切换为「运动」此时显示「最喜欢的运动」文本框点击「提交」检查提交数据。未配置 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考