Variables decorated by '[@State](/user/State)', '[@StorageLink](/user/StorageLink)', '[@StorageProp](/user/StorageProp)', '[@LocalStorageLink](/user/LocalStorageLink)', '[@LocalStorageProp](/user/LocalStorageProp)' and '[@Provide](/user/Provide)' must be initialized locally. <ArkTSCheck>

// xxx.ets
export class Message {
  value: string | undefined;
constructor(value: string) {
this.value = value
}
}
@Entry
@Component
struct Index {
@State switch: boolean = true
@Provide card: string = ‘6666777’
build() {
Column() {
Button(‘Hello World’)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.switch = !this.switch
})
if (this.switch) {
Child({ message: new Message(‘Child’), card: ‘’, data: ‘222’, ability: ‘111’, iconIdx: 88 })
}
}
.height(“100%”)
.width(‘100%’)
}
}
@Reusable
@Component
struct Child {
private readonly TAG = ‘xxxxx’
itemIndex: number = -1
@Prop data: string
@Provide ability?: string = ‘222’;
@State @Watch(‘xx’) iconIdx: number = 0;
@Consume card: string
@State message: Message = new Message(‘AboutToReuse’);
aboutToReuse(params: Record<string, ESObject>) {
console.info(“Recycle Child”)
this.message = params.message as Message
this.itemIndex = params.itemIndex
this.data = params.data
this.ability = params.ability
}
build() {
Column() {
Text(this.message.value)
.fontSize(20)
Text(<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.itemIndex}</span>)
.fontSize(20)
Text(this.data)
.fontSize(20)
Text(this.ability)
.fontSize(20)
Text(<span class="hljs-subst">${<span class="hljs-variable language_">this</span>.iconIdx}</span>)
.fontSize(20)
}
.borderWidth(2)
.height(100)
}
xx(changedPropertyName: string) {
}
}