使用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

xbibi

2024-05-23 23:30:17

浏览

回答 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方法中也容易出现。

2024-05-24 23:17:56

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看