我们将 ArkTS 中针对组件和数据的渲染控制主要分为 3 种情况：
- 文本渲染：将数据以普通文本的形式进行渲染；
- 条件渲染：通过条件判断的方式来控制组件或文本的条件渲染；
- 循环渲染：通过循环数组的方式来实现组件的循环渲染；
一、文本渲染
文本渲染，就是将数据以普通文本的形式在 Text 组件中进行渲染。
唯一需要注意的是：Text 组件中只能渲染字符串类型，如果数据不是字符串类型，就需要转换为字符串类型。常用的转换方式主要有以下几种：
- 模板字符串：将数据以模板字符串的形式进行渲染，
.toString()：将数据转换为字符串类型后进行渲染；JSON.stringify()：将引用类型的数据转换为 JSON 格式的字符串进行渲染；
示例代码：
@Entry
@Component
struct MyPage {
@State name: string = '张三';
@State count: number = 100;
@State friends: string[] = ["韩梅梅", "李华"]
build() {
Column() {
Text(`你好，我的名字是${this.name}。`)
Text(this.count.toString())
Text(JSON.stringify(this.friends))
}
}
}
代码预览效果如下：
二、条件渲染
在 ArkTS 中，条件渲染的方式主要有 2 种：
- if 语句：主要用于对组件进行条件渲染；
- 三目运算符：主要用于对数据进行条件渲染；
1、if语句
ArkTS中提供了if、else if 和 else 三种条件语句来实现组件的条件渲染，详细使用可以查阅官方文档。
示例代码：
@Entry
@Component
struct MyPage {
@State score: number = 88;
build() {
Column() {
if (this.score >= 90) {
Text('优')
} else if (this.score >= 60) {
Text('良')
} else {
Text('差')
}
}
}
}
2、三目运算符
if 语法主要是在组件之间进行条件渲染，而组件内数据的条件渲染，就需要通过三目运算符来实现。
示例代码：
@Entry
@Component
struct MyPage {
@State age: number = 20;
build() {
Column() {
Text(this.age >= 18 ? "已成年" : "未成年")
}
}
}
三、循环渲染
ArkTS 中提供了 ForEach 接口来基于数组类型数据来进行循环渲染，且需要与容器组件配合使用，详细使用可以查阅官方文档。
@Entry
@Component
struct MyPage {
@State friends: string[] = ["韩梅梅", "李华"]
build() {
Column() {
// 数组循环渲染
ForEach(this.friends, (item: string, index: number) => {
Text(item) // 每一轮循环都创建渲染一个Text组件
}, (item: string) => item)
}
}
}
ForEach 接收 3 个参数，分别是：
- 数据源：ForEach 需要遍历的数组；
- 组件生成函数：为数组中的每个元素创建对应的UI组件；
- item 参数：数组中的数据项。
- index 参数（可选）：数组中的数据项索引（下标）。
- 键值生成函数：为数据源的每个数组项生成唯一且持久的键值。函数返回值就是我们自定义的键值生成规则。
- item 参数：数组中的数据项。
- index 参数（可选）：数组中的数据项索引（下标）。
