向子组件传递Builder时this的指向问题

项目中遇到这样一个场景,需要向子组件传递一个Builder

ts 复制代码
// 父组件
@Component
struct FatherComponent{
   @State text:string = 0
   ... 
build(){
    NavbarView({
     slot_right: this.rightNavbar, // 自定义的标题栏右侧
    })
    ...
  }
  
@Builder rightNavbar() {
  Row() {
    Text(this.text)
  }
}
    ...
}

// 子组件
@Component
struct NavbarView{
    ...
    @BuilderParam slot_right: () => void = empty
    build(){
      ...
      this.slot_right()
      ...
    }
    ...
    
}

父组件的Builder中使用了父组件中的变量this.text,由于在父组件中,this 指向父组件自身,但是这个Builder传递到子组件后,this指向的是子组件,因此这样直接传递会导致错误。

有以下两种解决方法:

1. 将传递的Builder在父组件中完成初始化,即

ts 复制代码
// 父组件
@Component
struct FatherComponent{
   @State text:string = 0
   ... 
build(){
    NavbarView({
     titleStr: '',
     slot_right: ()=>{
         this.rightNavbar()
     },
    })
    ...
  }
  
@Builder rightNavbar() {
  Row() {
    Text(this.text)
  }
}

这样,Builder就会在父组件中调用,this就会指向父组件

2.尾随闭包初始化组件

ts 复制代码
// 父组件
@Component
struct FatherComponent{
   @State text:string = 0
   ... 
build(){
    NavbarView(){
        this.rightNavbar()
    }
    ...
  }
  
@Builder rightNavbar() {
  Row() {
    Text(this.text)
  }
}

也可以实现,但是此种方式使用范围较窄,只适用于子组件只有一个BuilderParams参数的情形。

相关推荐
Kitasan Burakku1 小时前
Typescript return type
前端·javascript·typescript
安卓开发者7 小时前
鸿蒙NEXT网络通信进阶:全方位优化HTTP传输性能
http·华为·harmonyos
星光不问赶路人9 小时前
一文搞清楚 TypeScript 中 triple-slash 与 tsconfig.types 有何区别?
typescript·vite
爱笑的眼睛1110 小时前
HarmonyOS 应用开发深度解析:ArkTS 状态管理与渲染控制的艺术
华为·harmonyos
爱笑的眼睛1110 小时前
深入理解HarmonyOS ArkTS语法:从基础到高级应用开发
华为·harmonyos
爱笑的眼睛111 天前
深入解析HarmonyOS应用开发:ArkTS语法精要与UI组件实践
华为·harmonyos
爱笑的眼睛111 天前
深入浅出 ArkTS:构建响应式 HarmonyOS 应用的现代语法与实践
华为·harmonyos
爱笑的眼睛111 天前
深入浅出 ArkTS:HarmonyOS 应用开发的语言基石
华为·harmonyos
安卓开发者1 天前
鸿蒙Next中使用Socket进行网络通信:完整指南与实战
华为·harmonyos
A懿轩A1 天前
【HarmonyOS应用】《账理通》更新啦!
华为·harmonyos