• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# \@Require Decorator: Validating Constructor Input Parameters
2
3
4\@Require is a decorator for declaring that parameters – regular variables (those not decorated by any decorator) or variables decorated by \@Prop, \@State, \@Provide, or \@BuilderParam – must be passed in to the constructor.
5
6
7> **NOTE**
8>
9> Validation for \@Prop and \@BuilderParam decorated variables is supported since API version 11.
10>
11> Validation for regular variables is supported since API version 12.
12
13## Overview
14
15When \@Require is used together with a regular variable or a variable decorated by \@Prop, \@State, \@Provide, or \@BuilderParam, the variable must be passed as the input parameter in to the constructor of a custom component.
16
17## Constraints
18
19The \@Require decorator can only decorate a regular variable or a variable decorated by \@Prop, \@State, \@Provide, or \@BuilderParam in a struct.
20
21## Use Scenarios
22
23When the \@Require decorator is used together with a regular variable or a variable decorated by \@Prop, \@State, \@Provide, or \@BuilderParam in the **Child** component, the parent component **Index** must pass in the variable for constructing the **Child** component. Otherwise, the compilation fails.
24
25```ts
26@Entry
27@Component
28struct Index {
29  @State message: string = 'Hello World';
30
31  @Builder buildTest() {
32    Row() {
33      Text('Hello, world')
34        .fontSize(30)
35    }
36  }
37
38  build() {
39    Row() {
40      Child({ regular_value: this.message, state_value: this.message, provide_value: this.message, initMessage: this.message, message: this.message,
41        buildTest: this.buildTest, initbuildTest: this.buildTest })
42    }
43  }
44}
45
46@Component
47struct Child {
48  @Builder buildFuction() {
49    Column() {
50      Text('initBuilderParam')
51        .fontSize(30)
52    }
53  }
54  @Require regular_value: string = 'Hello';
55  @Require @State state_value: string = "Hello";
56  @Require @Provide provide_value: string = "Hello";
57  @Require @BuilderParam buildTest: () => void;
58  @Require @BuilderParam initbuildTest: () => void = this.buildFuction;
59  @Require @Prop initMessage: string = 'Hello';
60  @Require @Prop message: string;
61
62  build() {
63    Column() {
64      Text(this.initMessage)
65        .fontSize(30)
66      Text(this.message)
67        .fontSize(30)
68      this.initbuildTest();
69      this.buildTest();
70    }
71    .width('100%')
72    .height('100%')
73  }
74}
75```
76
77 ![img](figures/9e2d58bc-b0e1-4613-934b-8e4237bd5c05.png)
78
79## Incorrect Usage
80
81```ts
82@Entry
83@Component
84struct Index {
85  @State message: string = 'Hello World';
86
87  @Builder buildTest() {
88    Row() {
89      Text('Hello, world')
90        .fontSize(30)
91    }
92  }
93
94  build() {
95    Row() {
96      Child()
97    }
98  }
99}
100
101@Component
102struct Child {
103  @Builder buildFuction() {
104    Column() {
105      Text('initBuilderParam')
106        .fontSize(30)
107    }
108  }
109  // As @Require is used here, parameters must be passed in to the constructor.
110  @Require regular_value: string = 'Hello';
111  @Require @State state_value: string = "Hello";
112  @Require @Provide provide_value: string = "Hello";
113  @Require @BuilderParam initbuildTest: () => void = this.buildFuction;
114  @Require @Prop initMessage: string = 'Hello';
115
116  build() {
117    Column() {
118      Text(this.initMessage)
119        .fontSize(30)
120      this.initbuildTest();
121    }
122  }
123}
124```
125