如何在ArkTS中实现组件的复用，通过@Component装饰器将常用UI封装为独立组件？

Question

如何在ArkTS中实现组件的复用，通过@Component装饰器将常用UI封装为独立组件？
本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】，欢迎正在阅读的你也加入。

Answer 1

例如，创建一个包含一个图片和一段文本的组件。

@Component
struct MyCustomComponent {
  @State imageUrl: string = 'path/to/image.jpg';
  @State textContent: string = 'Some default text';

  build() {
    Column() {
      Image(this.imageUrl)
       .width(100)
       .height(100);
      Text(this.textContent);
    }
  }
}

步骤二：在其他组件中复用
在需要使用这个独立组件的地方，可以直接引入并使用。

@Entry
@Component
struct MainComponent {
  build() {
    Column() {
      MyCustomComponent();
      // 可以根据需要传递不同的属性值来定制组件
      MyCustomComponent({ imageUrl: 'another/image.jpg', textContent: 'Different text' });
    }
  }
}

在封装和复用组件时，需要注意以下几点：
合理设计组件的接口，通过属性传递的方式让外部组件能够灵活地配置内部状态和外观。
确保组件的独立性，避免过度依赖外部环境，提高可维护性和可测试性。
如果组件内部有状态管理，要确保状态的更新不会影响到其他组件的正常运行。
🔗 参考资料：华为开发者文档中关于组件封装和复用的部分。

本文参与了【 HarmonyOS NEXT 技术问答冲榜，等你来战！】，欢迎正在阅读的你也加入。