HarmonyOS ArkTS中条件渲染需用@State装饰状态变量，支持if/else、else if嵌套及ForEach内单条过滤，子组件状态须通过@Link传递避免丢失。
在HarmonyOS ArkTS开发中，需要根据用户操作、网络状态或数据变化实时切换界面元素——比如登录后显示个人中心按钮、加载中隐藏列表、错误时展示重试提示，这些都依赖条件渲染实现。
基础if/else结构写法
在组件的build()函数内直接使用if语句包裹要条件显示的UI组件。
if语句后必须紧跟一个构建函数（即花括号{}内含至少一个可渲染组件），否则编译报错。
写法与标准TypeScript一致：if (this.status) { Text('已启用') } else { Text('已禁用') }。
【this.status必须用@State装饰】，否则状态变更不会触发界面更新。
嵌套条件与多分支控制
支持else if和深层嵌套，但需注意父容器对子组件类型的约束。
例如Grid容器内所有条件分支都只能返回GridItem组件，否则运行时报错。
第一步：定义多级状态变量
@State showHeader: boolean = true
@State userType: string = 'guest'
第二步：在build中组合判断
if (this.showHeader) {
Text('欢迎页').fontSize(20)
if (this.userType === 'admin') {
Button('管理后台').onClick(() => this.goToAdmin())
} else if (this.userType === 'user') {
Button('我的订单').onClick(() => this.goToOrder())
} else {
Button('立即登录').onClick(() => this.login())
}
}
条件渲染配合ForEach动态列表
方法一：在外层控制整个列表显隐
if (this.data.length > 0) {
List() {
ForEach(this.data, item => ListItem() { Text(item.name) }, item => item.id)
}
} else {
Text('暂无数据').fontSize(16).fontColor(Color.Grey)
}
方法二：在ForEach内部做单条过滤
ForEach(this.allItems, item => {
if (item.visible) {
ListItem() { Text(item.title) }
}
}, item => item.id)
注意：ForEach内部的if只影响当前item的渲染，不会破坏列表结构完整性。
避免状态丢失的关键处理
@State变量归属父组件，子组件不能直接持有条件渲染中可能被销毁的@State。
当条件分支内包含自定义子组件且该子组件需维护自身状态时，必须用@Link从父组件传递状态引用。
错误写法：
if (this.showPanel) {
CustomPanel() // 若CustomPanel内有@State，切换时状态会重置
}
正确写法：
if (this.showPanel) {
CustomPanel({ isVisible: $showPanel }) // 用$前缀传@Link绑定
}
