harmony(鸿蒙)Initialization of Custom Components’ Member Variables

  • 2022-08-09
  • 浏览 (675)

Initialization of Custom Components’ Member Variables

The member variables of a component can be initialized in either of the following ways:

  • Local initialization. For example:
  @State counter: Counter = new Counter()
  • Initialization using constructor parameters. For example:
  MyComponent({counter: $myCounter})

The allowed method depends on the decorator of the state variable, as shown in the following table.

Decorator Type Local Initialization Initialization Using Constructor Parameters
@State Mandatory Optional
@Prop Forbidden Mandatory
@Link Forbidden Mandatory
@StorageLink Mandatory Forbidden
@StorageProp Mandatory Forbidden
@Provide Mandatory Optional
@Consume Forbidden Forbidden
@ObjectLink Forbidden Mandatory
Normal member variable Recommended Optional

As indicated by the preceding table:

  • The @State decorated variables need to be initialized locally. The initial value can be overwritten by the constructor parameter.

  • The @Prop and @Link decorated variables must be initialized only by constructor parameters.

Comply with the following rules when using constructors to initialize member variables:

From the Variable in the Parent Component (Below) to the Variable in the Child Component (Right) @State @Link @Prop Normal Variable
@State Not allowed Allowed Allowed Allowed
@Link Not allowed Allowed Not recommended Allowed
@Prop Not allowed Not allowed Allowed Allowed
@StorageLink Not allowed Allowed Not allowed Allowed
@StorageProp Not allowed Not allowed Not allowed Allowed
Normal variable Allowed Not allowed Not allowed Allowed

As indicated by the preceding table:

  • The normal variables of the parent component can be used to initialize the @State decorated variables of the child component, but not the @Link or @Prop decorated variables.

  • The @State decorated variable of the parent component can be used to initialize the @Prop, @Link (using $), or normal variables of the child component, but not the @State decorated variables of the child component.

  • The @Link decorated variables of the parent component can be used to initialize the @Link decorated or normal variables of the child component. However, initializing the @State decorated members of the child component can result in a syntax error. In addition, initializing the @Prop decorated variables is not recommended.

  • The @Prop decorated variables of the parent component can be used to initialize the normal variables or @Prop decorated variables of the child component, but not the @State or @Link decorated variables.

  • Passing @StorageLink and @StorageProp from the parent component to the child component is prohibited.

  • In addition to the preceding rules, the TypeScript strong type rules need to be followed.

Example

// xxx.ets
class ClassA {
  public a:number
  constructor(a: number) {
    this.a = a
  }
}
@Entry
@Component
struct Parent {
  @State parentState: ClassA = new ClassA(1)
  
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CompA({ aState: new ClassA(2), aLink: $parentState })
      }
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CompA({ aLink: $parentState })
      }
      Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
        CompA({ aState: new ClassA(3), aLink: $parentState })
      }
    }
  }
}

@Component
struct CompA {
  @State aState: any = false
  @Link aLink: ClassA
  
  build() {
    Column() {
      CompB({ bLink: $aLink, bProp: this.aState })
      CompB({ bLink: $aState, bProp: false })
    }
  }
}

@Component
struct CompB {
  @Link bLink: ClassA
  @Prop bProp: boolean
  
  build() {
    Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
      Text(JSON.stringify(this.bLink.a)).fontSize(30)
      Text(JSON.stringify(this.bProp)).fontSize(30).fontColor(Color.Red)
     }.margin(10)
  }
}

你可能感兴趣的鸿蒙文章

harmony(鸿蒙)UI Development

harmony(鸿蒙)ArkUI Overview

harmony(鸿蒙)File Organization

harmony(鸿蒙)app.js

harmony(鸿蒙)“js” Tag

harmony(鸿蒙)Lifecycle

harmony(鸿蒙)Multi-Language Capability

harmony(鸿蒙)Resource Limitations and Access

harmony(鸿蒙)CSS

harmony(鸿蒙)HML

0  赞