ArkTs学习之ArkTS装饰器@Require装饰器(八)

@Require是校验 @Prop@BuilderParam 是否需要构造传参的一个装饰器, @Require 装饰器不能单独使用。

🔊 说明:从API version 11开始使用。 

概述

当@Require装饰器和@Prop或者@BuilderParam结合使用时,在构造该自定义组件时,@Prop和@BuilderParam必须在构造时传参。@Require是校验@Prop或者@BuilderParam是否需要构造传参的一个装饰器。

🔊限制条件: @Require装饰器仅用于装饰struct内的@Prop和@BuilderParam成员状态变量。

使用场景

当Child组件内使用@Require装饰器和@Prop或者@BuilderParam结合使用时,父组件Index在构造Child时必须传参,否则编译不通过。

@Entry
@Component
struct Index {
  /** 变量 */
  @State message: string = 'Hello World';

  /** 自定义构造函数 */
  @Builder
  buildTest() {
    Row() {
      Text('Hello,World')
        .fontSize(30)
    }
  }

  /** 系统构造函数 */
  build() {
    Row() {
      Column(){
        Child({
          initMessage: this.message,
          message: this.message,
          buildTest: this.buildTest,
          initBuildTest: this.buildTest
        })
      }.width('100%')
    }.height('100%')
  }
}

/** 【自定义组件】 */
@Component
struct Child {
  /** 变量 */
  @Require @Prop message: string; //📢: 父组件Index在构造Child时必须传参,否则编译不通过
  @Require @Prop initMessage: string = 'Hello'; //📢: 父组件Index在构造Child时必须传参,否则编译不通过
  @Require @BuilderParam buildTest: () => void; //📢: 父组件Index在构造Child时必须传参,否则编译不通过
  @Require @BuilderParam initBuildTest: () => void; //📢: 父组件Index在构造Child时必须传参,否则编译不通过

  /** 自定义构造函数 */
  @Builder
  buildFunction() {
    Column() {
      Text('initBuilderParam')
        .fontSize(30)
    }
  }

  build() {
    Column() {
      Text(this.initMessage)
        .fontSize(30)
      Text(this.message)
        .fontSize(30)
      this.initBuildTest();
      this.buildTest();
    }
  }
}

错误场景

@Entry
@Component
struct Index {
  /** 变量 */
  @State message: string = 'Hello World';

  /** 自定义构造函数 */
  @Builder
  buildTest() {
    Row() {
      Text('Hello, world')
        .fontSize(30)
    }
  }

  build() {
    Row() {
      Child() // ❌:'@Require' decorated 'initBuildTest' must be initialized through the component constructor. <ArkTSCheck>
    }
  }
}

@Component
struct Child {
  /** 变量 */
  //📢:使用@Require必须构造时传参。
  @Require @BuilderParam initBuildTest: () => void = this.buildFuction;
  @Require @Prop initMessage: string = 'Hello';

  /** 自定义构造函数 */
  @Builder
  buildFuction() {
    Column() {
      Text('initBuilderParam')
        .fontSize(30)
    }
  }

  /** 系统构造函数 */
  build() {
    Column() {
      Text(this.initMessage)
        .fontSize(30)
      this.initBuildTest();
    }
  }
}

posted on 2024-08-06 13:32  梁飞宇  阅读(201)  评论(0)    收藏  举报