如何根据条件动态渲染组件

前提条件

已在“UI编辑”页面添加相应物料插件（如“文本展示”组件）。如未添加，请参考如何使用物料插件完成添加。

步骤1：创建状态变量

1. 进入流程元模板的“UI编辑”页面，单击左侧插件栏中的，展开“状态管理”页面。
2. 在“页面状态”页签下，添加一个用于判断条件的变量（如“state.isLogin”）。配置如下：
   图1 添加变量
   
   • 变量名：填写“isLogin”。
   • 初始值：填写“false”。

步骤2：配置组件信息

在“UI编辑”页面的画布中，选中已添加的“文本展示”组件，并在其属性面板的“文本内容”中输入需要展示的内容（如“欢迎登录”）。

图2 设置文本内容

步骤3：配置渲染条件

1. 将“文本展示”组件的属性面板切换至“高级”页签。
2. 找到“是否渲染”属性，将其设置为，并单击。
3. 在弹出的窗口中，选择步骤1：创建状态变量添加的变量，单击“确定”。
   图3 绑定变量
   

步骤4：查看动态渲染效果

完成绑定后，组件的渲染状态将由“isLogin”的值动态控制

• 当变量“isLogin”为“true”时：组件渲染，页面显示“欢迎登录”文本。
• 当变量“isLogin”为“false”时：组件不渲染，页面隐藏该文本。