HarmonyOS 鸿蒙Next artTs的组件如何使用ForEach遍历渲染

HarmonyOS 鸿蒙Next artTs的组件如何使用ForEach遍历渲染

定义了一个初始数据，使用接口TabItem，TabItem接口有一个属性名是component，写一些自定义组件，

cke_127.png

cke_8474.png

这里使用item.component()调用组件不成功，这是什么原因，是arkTs不支持这样导入组件吗，另外想问问arkTs的组件都是什么数据类型，接口定义的时候应该写什么属性。


更多关于HarmonyOS 鸿蒙Next artTs的组件如何使用ForEach遍历渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

看一下你item.component()返回值是啥

更多关于HarmonyOS 鸿蒙Next artTs的组件如何使用ForEach遍历渲染的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用hilog打印，是个undefind，

楼主解决没有？ 我也遇到这个问题了，想做一个数组配置但是component的参数不知道填写什么

还没，不知道咋搞，

Go to baidu.

你这个需求应该可以用Tab组件解决吧

component 的数据类型不指定，写法是不对的吧。

cke_122.png

自定义组件的数据类型是啥呀，一时没找到，

问楼主，你在安装SDK时很顺利吗？我就卡住怎么都安装不了了

安装顺利的，这还得看具体报啥错了，我也是按着文档慢慢安装的，

cke_183.png

cke_133.png

试试这样呢

遍历的不是单个元素吗，这样写item岂不是一个数组，刚刚试了一下很多红线报错，

在HarmonyOS中，ForEach组件用于遍历数组或对象集合，并将每个元素渲染为UI组件。ForEach的使用方式如下：

ForEach(
  arr: Array<any>, 
  itemGenerator: (item: any, index?: number) => void, 
  keyGenerator?: (item: any, index?: number) => string 
): void
  • arr：要遍历的数组或对象集合。
  • itemGenerator：生成每个元素的UI组件的回调函数，接收当前元素和可选索引作为参数。
  • keyGenerator：可选参数，用于生成每个元素的唯一键值，通常用于优化渲染性能。

示例代码：

@Entry
@Component
struct MyComponent {
  private items: Array<string> = ['Item 1', 'Item 2', 'Item 3'];

  build() {
    Column() {
      ForEach(this.items, (item: string, index: number) => {
        Text(item)
          .fontSize(20)
          .margin(10)
      }, (item: string, index: number) => index.toString())
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

在这个示例中，ForEach遍历items数组，并为每个元素生成一个Text组件。keyGenerator使用数组索引作为每个元素的唯一键值。

回到顶部