使用BuilderParam在父组件调用this的方法报错:Error message:is not callable

子组件Child中有一个@BuilderParam 参数,在父组件中使用子组件时将父组件中的builder函数传入子组件中。在builder函数中调用父组件中的方法时,出现报错Error message:is not callable。

问题代码如下:

@Component 
struct Child { 
  @Builder FunABuilder0() { 
        } 
  @BuilderParam aBuilder0: () => void = this.FunABuilder0; 
  
  build() { 
    Column() { 
      this.aBuilder0() 
    } 
  } 
} 
  
@Entry 
@Component 
struct Parent { 
  @Builder componentBuilder() { 
    Text(`Parent builder `) 
      .onClick(()=>{ 
        this.test1() 
      }) 
  } 
  
  test1(): void { 
    console.log('test1') 
  } 
  
  build() { 
    Column() { 
      Child({ aBuilder0: this.componentBuilder }) 
    } 
  } 
}
HarmonyOS
2024-05-23 23:30:17
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
ubaba

在js中调用this时需要注意this的指向。当前代码在子组件中声明builder方法时,this指向的是父组件,而@Builder componentBuilder()通过this.componentBuilder的形式传给子组件@BuilderParam customBuilderParam,this指向在Child的label,即“Child”,所以在点击事件响应的时候,this是指向Child而child中没有test()所以出现jscrash。需要在父组件中声明子组件时通过bind(this)或者监听函数将this传递到子组件。

参考代码:

@Component 
struct Child { 
  @Builder FunABuilder0() { 
  
  } 
  @BuilderParam aBuilder0: () => void = this.FunABuilder0; 
  
  build() { 
    Column() { 
      this.aBuilder0() 
    } 
  } 
} 
  
@Entry 
@Component 
struct Parent { 
  @Builder componentBuilder() { 
    Text(`Parent builder `) 
      .onClick(()=>{ 
        this.test1() 
      }) 
  } 
  
  test1(): void { 
    console.log('test1') 
  } 
  
  build() { 
    Column() { 
      Child({ aBuilder0:()=>{this.componentBuilder()} }) 
  //或者    Child({ aBuilder0: this.componentBuilder.bind(this) }) 
    } 
  } 
}

注意事项:

js中在将方法进行传递时,如果方法中有使用this,需要注意this的传递,类似的场景在自定义弹窗的builder方法中也容易出现。

分享
微博
QQ
微信
回复
2024-05-24 23:17:56
相关问题
组件调用组件方法
479浏览 • 1回复 待解决
冷启动报错Error message
645浏览 • 1回复 待解决
app启动crash报错Error message:MainPage:
632浏览 • 1回复 待解决
@BuilderParam修饰属性报错
710浏览 • 1回复 待解决
弹窗组件调用组件函数传递
420浏览 • 1回复 待解决
组件与子组件使用@Link双向同步
363浏览 • 1回复 待解决
Native侧调用ArkTS全局普通方法
399浏览 • 1回复 待解决