mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2025-12-11 18:42:56 +00:00
37 lines
1.9 KiB
Markdown
37 lines
1.9 KiB
Markdown
---
|
||
title: 渲染唯一标识（key）
|
||
sidebar_position: 2
|
||
tags: [FAQ]
|
||
---
|
||
渲染唯一标识（key）和 React 中组件的 key 属性的原理是一致的，都是为了在渲染场景或者组件切换的场景中唯一标识一个组件。
|
||
|
||
你可以在组件右侧配置面板的「高级」中看到此配置项，该配置项一般配合「是否渲染」和「循环」功能使用。
|
||
|
||
|
||
## 以下场景必需设置「渲染唯一标识」
|
||
#### 场景一：同类组件切换
|
||
以下场景中，当「爱好」选择「游戏」时显示「最喜欢的游戏」，选择「运动」时显示「最喜欢的运动」
|
||
|
||
|
||
配置方式如下：
|
||
|
||
1. 增加变量数据源：hobby
|
||
2. 「最喜欢的游戏」表单标识设置为 game，「是否渲染」绑定变量「state.hobby === '游戏'」
|
||
|
||
|
||
|
||
3. 「最喜欢的运动」表单标识设置为 sport，「是否渲染」绑定变量「state.hobby === '运动'」
|
||
4. 「爱好」设置 onChange 动作
|
||
|
||
|
||
|
||
5. 「提交」按钮绑定 onClick 动作
|
||
|
||
|
||
|
||
按以上配置（不配置渲染唯一标识），确实可以实现切换爱好时下方的文本框切换，但在提交数据时会发现，即使选择了「运动」，提交的时候 sport 字段是「最喜欢的游戏」的值。
|
||
|
||
原因：在进行文本框组件切换时，由于没有设置 key，底层会「复用」切换之前的组件
|
||
|
||
以上场景只需要给两个组件配置「渲染唯一标识」即可。
|