鸿蒙应用入门级开发者认证实验三（循环渲染）

ForEach(this.simpleList,(item:string) => { ChildItem({'item':item} as Record<string,string>) }, (item:string)=>item) 

ForEach组件循环渲染列表数据：

数据源 this.simpleList，类型为 Array<string>（字符串数组），表示待遍历的列表数据，例如：["A", "B", "C"]

(item: string) => {
  ChildItem({'item': item} as Record<string, string>)
}

子项渲染函数为数组中的每个 item生成子组件

• 参数：item是当前遍历的数组元素（字符串类型）

• 组件创建：

  • ChildItem：自定义子组件名
  • {'item': item}：向子组件传递名为 item的属性，值为当前元素
  • as Record<string, string>：类型断言，确保参数符合 Record键值对格式

(item: string) => item

键值生成函数为每个子项生成唯一标识（Key），直接使用 item字符串作为 Key（需确保数组元素不重复），Key 用于高效更新/重渲染列表，鸿蒙依赖此标识进行差异对比

注意

1. Key 的唯一性

   • 若 this.simpleList含重复值（如 ["A", "A", "B"]），需修改 Key 生成逻辑（例如追加索引）：

   (item: string, index?: number) => `${item}_${index}`
   

2. 类型安全
   Record<string, string>确保传递给 ChildItem的属性是键值对格式。若子组件定义了严格参数类型（如 @Prop item: string），可简化为：

   ChildItem({ item: item })
   

3. 性能优化

   • 避免在渲染函数内执行复杂计算
   • 超大列表建议搭配 LazyForEach

示例

@Entry
@Component
struct ParentComponent {
  @State simpleList: string[] = ["Apple", "Banana", "Cherry"];

  build() {
    Column() {
      ForEach(
        this.simpleList,
        (item: string) => {
          ChildItem({ item: item }) // 简化的属性传递
        },
        (item: string) => item // Key 生成
      )
    }
  }
}

@Component
struct ChildItem {
  @Prop item: string; // 声明接收的属性

  build() {
    Text(this.item)
      .fontSize(20)
      .margin(5)
  }
}

若 simpleList会被动态修改（增删改），必须使用 @State装饰器触发UI更新。