!23585 Rectify the arkts syntax of qs

Merge pull request !23585 from 189******51/master

zh-cn/application-dev/quick-start/arkts-builder.md

@@ -77,13 +77,22 @@ MyGlobalBuilderFunction()
 
 
 ```ts
-ABuilder( $$ : { paramA1: string, paramB1 : string } );
+class ABuilderParam {
+  paramA1: string = ''
+  paramB1: string = ''
+}
+
+ABuilder($$ : ABuilderParam);
 ```
 
 
 
 ```ts
-@Builder function ABuilder($$: { paramA1: string }) {
+class ABuilderParam {
+  paramA1: string = ''
+}
+
+@Builder function ABuilder($$: ABuilderParam) {
   Row() {
     Text(`UseStateVarByReference: ${$$.paramA1} `)
   }
@@ -94,10 +103,10 @@ struct Parent {
   @State label: string = 'Hello';
   build() {
     Column() {
-      // 在Parent组件中调用ABuilder的时候，将this.label引用传递给ABuilder
+      // Pass the this.label reference to the ABuilder component when the ABuilder component is called in the Parent component.
       ABuilder({ paramA1: this.label })
       Button('Click me').onClick(() => {
-        // 点击“Click me”后，UI从“Hello”刷新为“ArkUI”
+        // After Click me is clicked, the UI text changes from Hello to ArkUI.
         this.label = 'ArkUI';
       })
     }

zh-cn/application-dev/quick-start/arkts-builderparam.md

@@ -34,20 +34,24 @@
 - 用父组件自定义构建函数初始化子组件\@BuildParam装饰的方法。
 
   ```ts
-  @Component
-  struct Child {
-    @BuilderParam aBuilder0: () => void;
+@Component
+struct Child {
+  @Builder componentBuilder() {
+    Text(`Parent builder `)
+  }
+
+  @BuilderParam aBuilder0: () => void = this.componentBuilder;
 
   build() {
     Column() {
       this.aBuilder0()
     }
   }
-  }
+}
 
-  @Entry
-  @Component
-  struct Parent {
+@Entry
+@Component
+struct Parent {
   @Builder componentBuilder() {
     Text(`Parent builder `)
   }
@@ -57,7 +61,7 @@
       Child({ aBuilder0: this.componentBuilder })
     }
   }
-  }
+}
   ```
 
 
@@ -70,11 +74,15 @@
    >  开发者谨慎使用bind改变函数调用的上下文，可能会使this指向混乱。
 
   ```ts
-  @Component
-  struct Child {
+@Component
+struct Child {
+  @Builder componentBuilder() {
+    Text(`Child builder `)
+  }
+
   label: string = `Child`
-    @BuilderParam aBuilder0: () => void;
-    @BuilderParam aBuilder1: () => void;
+  @BuilderParam aBuilder0: () => void = this.componentBuilder;
+  @BuilderParam aBuilder1: () => void = this.componentBuilder;
 
   build() {
     Column() {
@@ -82,11 +90,11 @@
       this.aBuilder1()
     }
   }
-  }
+}
 
-  @Entry
-  @Component
-  struct Parent {
+@Entry
+@Component
+struct Parent {
   label: string = `Parent`
 
   @Builder componentBuilder() {
@@ -96,10 +104,10 @@
   build() {
     Column() {
       this.componentBuilder()
-        Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder.bind(this) })
-      }
+      Child({ aBuilder0: this.componentBuilder, aBuilder1: this.componentBuilder })
     }
   }
+}
   ```
 
 
@@ -112,7 +120,11 @@
 
 
 ```ts
-@Builder function GlobalBuilder1($$ : {label: string }) {
+class GlobalBuilderParam {
+  label: string = ""
+}
+
+@Builder function GlobalBuilder1($$ : GlobalBuilderParam) {
   Text($$.label)
     .width(400)
     .height(50)
@@ -121,11 +133,15 @@
 
 @Component
 struct Child {
+  @Builder componentBuilder() {
+    Text(`Child builder `)
+  }
+
   label: string = 'Child'
   // 无参数类，指向的componentBuilder也是无参数类型
-  @BuilderParam aBuilder0: () => void;
+  @BuilderParam aBuilder0: () => void = this.componentBuilder;
   // 有参数类型，指向的GlobalBuilder1也是有参数类型的方法
-  @BuilderParam aBuilder1: ($$ : { label : string}) => void;
+  @BuilderParam aBuilder1: ($$ : GlobalBuilderParam) => void = this.componentBuilder;
 
   build() {
     Column() {
@@ -167,10 +183,17 @@ struct Parent {
 
 ```ts
 // xxx.ets
+class CustomContainerParam {
+  header: string = '';
+}
 @Component
 struct CustomContainer {
-  @Prop header: string;
-  @BuilderParam closer: () => void
+  @Builder componentCloser() {
+    Text(`Custom closer `)
+  }
+
+  @Prop header: string = '';
+  @BuilderParam closer: () => void = this.componentCloser;
 
   build() {
     Column() {
@@ -194,12 +217,15 @@ struct CustomContainer {
 @Component
 struct CustomContainerUser {
   @State text: string = 'header';
+  param: CustomContainerParam = {
+    header: this.text
+  };
 
   build() {
     Column() {
       // 创建CustomContainer，在创建CustomContainer时，通过其后紧跟一个大括号“{}”形成尾随闭包
       // 作为传递给子组件CustomContainer @BuilderParam closer: () => void的参数
-      CustomContainer({ header: this.text }) {
+      CustomContainer(this.param) {
         Column() {
           specificParam('testA', 'testB')
         }.backgroundColor(Color.Yellow)

zh-cn/application-dev/quick-start/arkts-create-custom-components.md

@@ -42,15 +42,23 @@ HelloComponent可以在其他自定义组件中的build()函数中多次创建
 
 
 ```ts
+class HelloComponentParam {
+  message: string = ""
+}
+
 @Entry
 @Component
 struct ParentComponent {
+  param: HelloComponentParam = {
+    message: 'Hello, World!'
+  }
+
   build() {
     Column() {
       Text('ArkUI message')
-      HelloComponent({ message: 'Hello, World!' });
+      HelloComponent(param);
       Divider()
-      HelloComponent({ message: '你好!' });
+      HelloComponent(param);
     }
   }
 }

zh-cn/application-dev/quick-start/arkts-extend.md

@@ -81,7 +81,7 @@
     build() {
       Row({ space: 10 }) {
         Text(`${this.label}`)
-          .makeMeClick(this.onClickHandler.bind(this))
+          .makeMeClick(this.onClickHandler)
       }
     }
   }