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

Star7682024-06-21 11:24

项目中遇到这样一个场景，需要向子组件传递一个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参数的情形。