# 如何根据条件动态渲染组件
在页面开发中，经常需要根据特定条件（如用户登录状态、数据加载结果等）动态控制组件的显示或隐藏。例如：仅在用户登录时显示"欢迎登录"文本，未登录时隐藏该文本。
本文以"文本展示"组件为例，介绍如何通过设置"是否渲染"属性，实现组件的条件性渲染。
#### 前提条件
已在"UI编辑"页面添加相应物料插件（如"文本展示"组件）。如未添加，请参考[如何使用物料插件](https://support.huaweicloud.com/usermanual-idme/idme_base_0108.html)完成添加。
 #### 步骤1：创建状态变量
1. 进入流程元模板的"UI编辑"页面，单击左侧插件栏中的![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406137385.png)，展开"状态管理"页面。
2. 在"页面状态"页签下，添加一个用于判断条件的变量（如"state.isLogin"）。配置如下： 
   图1添加变量   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002372537780.png "点击放大")
   - 变量名：填写"isLogin"。
   
   - 初始值：填写"false"。
   
   
   
   
 
#### 步骤2：配置组件信息
在"UI编辑"页面的画布中，选中已添加的"文本展示"组件，并在其属性面板的"文本内容"中输入需要展示的内容（如"欢迎登录"）。
图2设置文本内容   
![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406017497.png "点击放大")
#### 步骤3：配置渲染条件
1. 将"文本展示"组件的属性面板切换至"高级"页签。
2. 找到"是否渲染"属性，将其设置为![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002372377896.png "点击放大")，并单击![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002406137389.png)。
3. 在弹出的窗口中，选择[步骤1：创建状态变量]添加的变量，单击"确定"。
   
   图3绑定变量   
   ![](https://support.huaweicloud.com/usermanual-idme/figure/zh-cn_image_0000002372537784.png "点击放大")
   
   
 
#### 步骤4：查看动态渲染效果
完成绑定后，组件的渲染状态将由"isLogin"的值动态控制
- 当变量"isLogin"为"true"时：组件渲染，页面显示"欢迎登录"文本。
- 当变量"isLogin"为"false"时：组件不渲染，页面隐藏该文本。