HarmonyOS 鸿蒙Next中自定义组件能否递归嵌套？

HarmonyOS 鸿蒙Next中自定义组件能否递归嵌套？ 试了一下下面文章的方法没成功

https://blog.csdn.net/ldc121xy716/article/details/150280579

interface TreeNode {
  id: number;
  name: string;
  children?: TreeNode[];
}

@Entry
@Component
struct TreeNodeComp {
  @State data: TreeNode[] = [
    {
      id: 1,
      name: '前端技术',
      children: [
        {
          id: 2,
          name: 'JavaScript',
          children: [
            { id: 3, name: 'ES6 特性' },
            { id: 4, name: '异步编程' }
          ]
        },
        {
          id: 5,
          name: 'Vue.js',
          children: [
            { id: 6, name: 'Vue 3 新特性' },
            {
              id: 7,
              name: '高级用法',
              children: [
                { id: 8, name: '递归组件' },
                { id: 9, name: '渲染函数' }
              ]
            }
          ]
        }
      ]
    },
    {
      id: 10,
      name: '后端技术',
      children: [
        { id: 11, name: 'Node.js' },
        { id: 12, name: 'Python' }
      ]
    }
  ];

  build() {
    Column() {
      ForEach(this.data, (node: TreeNode) => {
        TreeNodeComponent({ node: node });
      });
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('#ffffff');
  }
}

@Component
struct TreeNodeComponent {
  @Prop node: TreeNode;
  @Prop expand: boolean = false;

  build() {
    Column() {
      Row({ space: 5 }) {
        if (this.node.children && this.node.children.length > 0) {
          Image(this.expand ? $r('app.media.startIcon') : $r('app.media.startIcon'))
            .width(20)
            .height(20)
            .onClick(() => {
              this.expand = !this.expand;
            });
        } else {
          Image($r('app.media.startIcon'))
            .width(20)
            .height(20);
        }

        Text(this.node.name)
          .fontSize(16)
          .fontWeight(500)
          .layoutWeight(1);
      }
      .width('100%')
      .padding({
        left: 10,
        right: 10,
        top: 5,
        bottom: 5
      })
      .backgroundColor('#f5f5f5')
      .borderRadius(5)
      .margin({ bottom: 5 });

      if (this.node.children && this.node.children.length > 0 && this.expand) {
        ForEach(this.node.children, (childNode: TreeNode) => {
          TreeNodeComponent({ node: childNode });
        });
      }
    }
    .width('100%')
    .padding({ left: 20 });
  }
}