如何实现组件动态上下树
===========

可以通过ArkUI的NodeController模块，创建控制器管理绑定的[NodeContainer](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-nodecontainer#nodecontainer-1)组件，通过NodeController的rebuild()方法进行回调的触发，从而实现组件动态上下树，具体请参考如下代码：

import { FrameNode, NodeController, BuilderNode } from '@kit.ArkUI';

declare class Params {
  text: string;
}

@Builder
function textInputBuilder(params: Params) {
  Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceEvenly }) {
    Text(params.text)
      .fontSize(12)
    Button(\`This is a Button\`, { type: ButtonType.Normal, stateEffect: true })
      .fontSize(12)
      .borderRadius(8)
      .backgroundColor(0x317aff)
  }
  .height(100)
  .width(200)
}

class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null; _// Create root node_
  private wrappedTextInputBuilder: WrappedBuilder<\[Params\]> = wrapBuilder(textInputBuilder);
  private buildNode: BuilderNode<\[Params\]> | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext); _// Root node initialization_
    this.buildNode = new BuilderNode(uiContext);
    const rootRenderNode = this.rootNode.getRenderNode(); _// Get rendering nodes_
    if (rootRenderNode !== null) {
      this.buildNode.build(this.wrappedTextInputBuilder, { text: 'This is a Text' });
      const childNode = this.buildNode.getFrameNode()?.getRenderNode();
      if (childNode) {
        rootRenderNode.appendChild(childNode); _// Add new child nodes after rendering nodes_
        console.info('rootRenderNode.appendChild');
      }
    }
    return this.rootNode;
  }
}

@Entry
@Component
struct RenderNode\_pages {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceEvenly }) {
      NodeContainer(this.myNodeController)
        .borderWidth(1)
        .height(500)
        .width(330)

      Button(\`Adding a Node\`, { type: ButtonType.Normal, stateEffect: true })
        .fontSize(12)
        .borderRadius(8)
        .backgroundColor(0x317aff)
        .onClick(() => {
          this.myNodeController.rebuild();
        })
    }
    .padding({ left: 35, right: 35, top: 35 })
    .height(500)
    .width(500)
  }
}

**参考链接**

[rebuild](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-nodecontroller#rebuild)