# 如何通过循环数据实现动态渲染
在页面开发中，经常需要展示结构相同但数据不同的多个元素，例如商品列表、用户信息表、订单记录等。这类场景可通过"循环渲染"实现：将一个组件基于数据数组重复渲染多次，每次绑定不同的数据项。
本文以"文本展示"组件为例，介绍如何通过"循环数据"属性实现动态列表渲染。
#### 前提条件
已在"UI编辑"页面添加相应物料插件（如"文本展示"组件）。如未添加，请参考[如何使用物料插件](https://support.huaweicloud.com/usermanual-idme/idme_base_0108.html)完成添加。
 #### 步骤1：创建循环数据变量
1. 进入流程元模板的"UI编辑"页面，单击左侧插件栏中的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002372542908.png)，展开"状态管理"页面。
2. 在"页面状态"页签下，添加一个数组类型的变量（如"state.loop"）。配置如下： 
   图1添加变量   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406022633.png "点击放大")
   - 变量名：填写"loop"。
   
   - 初始值：
     ```
     [
       "零部件A",
       "零部件B",
       "零部件C",
       "零部件D"
     ]
     ```
     
   
   
   
   
 
#### 步骤2：配置循环渲染
1. 在"UI编辑"页面的画布中，选中已添加的"文本展示"组件，然后将其属性面板切换至"高级"页签。
2. 找到"循环数据"属性，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406276769.png)。
   
   图2设置循环数据   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406586701.png "点击放大")
   
   
3. 在弹出的窗口中，选择[步骤1：创建循环数据变量]添加的变量，单击"确定"。
   
   图3绑定变量   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406144097.png "点击放大")
   
   
 
#### 步骤3：配置组件信息
1. 将"文本展示"组件的属性面板切换至"属性"页签，并找到"文本内容"属性，单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406439985.png)。
   
   图4设置文本内容   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406599877.png "点击放大")
   
   
2. 在弹出的窗口中，选择[步骤1：创建循环数据变量]添加的循环数据变量，并将其值设置为高级属性"迭代变量名"所指定的值（如"item"），单击"确定"。
   
   图5为"文本内容"绑定变量   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002372720404.png "点击放大")
   
   
 
#### 步骤4：查看动态渲染效果
配置完成后，系统会根据"loop"数组的长度自动生成相应数量的"文本展示"组件，每个组件依次显示数组中对应项的内容（如"零部件A"、"零部件B"、"零部件C"、"零部件D"）。
图6动态渲染效果   
![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406288457.png "点击放大")