渲染唯一标识(key)
能力 | 免费版 | 轻享版 | 专业版 | 专属版 |
自定义页面 | 不支持 | 不支持 | 支持 | 支持 |
1. 简介及设置路径
渲染唯一标识(key)和 React 中组件的 key 属性的原理是一致的,都是为了在渲染场景或者组件切换的场景中唯一标识一个组件。
路径:自定义页面随意点击一个组件 >> 右侧的高级 >> 是否渲染 >> 渲染唯一标识
该配置项一般配合「是否渲染」和「循环」功能使用
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1635322560179-b3432aed-5ae3-40ae-93c2-9fd5a9b91ea4.png)
自定义页面
2. 使用场景
2.1 同类组件切换
以下场景中,当「爱好」选择「游戏」时显示「最喜欢的游戏」,选择「运动」时显示「最喜欢的运动」
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612085197093-2ccb4759-4e3f-45ca-a776-e750f08a4d74.png)
配置方式如下:
- 增加变量数据源:hobby
- 「最喜欢的游戏」表单标识设置为 game,「是否渲染」绑定变量「state.hobby === '游戏'」
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612085197074-bbd7edd0-8442-43b4-95d7-f56660e8d621.png)
- 「最喜欢的运动」表单标识设置为 sport,「是否渲染」绑定变量「state.hobby === '运动'」
- 「爱好」设置 onChange 动作
export function onChagne({ value, actionType, item }) {
this.setState({
hobby: value,
});
}
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612085197086-a76b5ac4-3303-4e0d-a6f3-72135418840b.png)
- 「提交」按钮绑定 onClick 动作
export function submit() {
console.log(this.$('form').getValue());
}
按以上配置(不配置渲染唯一标识),确实可以实现切换爱好时下方的文本框切换,但在提交数据时会发现,即使选择了「运动」,提交的时候 sport 字段是「最喜欢的游戏」的值。
原因:在进行文本框组件切换时,由于没有设置 key,底层会「复用」切换之前的组件
以上场景只需要给两个组件配置「渲染唯一标识」即可。
--------------------欢迎关注我们--------------------
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1631861711706-8b6b606d-26db-4978-8416-d588b2d155c9.jpeg)
本文档对您是否有帮助?