HarmonyOS @BuilderParam实现组件插槽时的this指向问题

在组件MyComp1中声明@State message=‘MyComp1’,@BuilderParam slot,在build()中渲染为this.slot()。

在页面中定义@State message=‘Hello World’,定义@Builder MySlot,并在MySlot添加点击事件展示页面的this.messge。

在页面build中调用MyComp1({ slot: this.MySlot })渲染到页面。

点击页面MySlot部分,展示的不是预期的’Hello World’,而是’MyComp1’。

目测是MyComp1中this.slot()调用导致this上下文转移。

使用MyComp1({ slot: this.MySlot.bind(this) })可锁定this指向,解决此问题,实测有效,但IDE如下提示:

“Function.bind” is not supported (arkts-no-func-bind) <ArkTSCheck>

如果后续不支持Function.bind,希望给出此类场景的解决方案。

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

请参考示例:

import { promptAction } from '@kit.ArkUI'

@Component
struct MyComp1 {
  /**
   *
   * 解释:
   * 1、本地初始化@BuilderParam,无需设置可选
   * 2、多插槽就设置多个 BuilderParam
   */

  @Builder slotBuilder() {};
  @BuilderParam slot: () => void = this.slotBuilder;
  @BuilderParam slot1: () => void = this.slotBuilder;
  @State message: string = 'MyComp1';

  build() {
    Column() {
      Text('MyComp1 + slot插槽').fontSize(30)
      this.slot()
      this.slot1()
    }
    .width('100%').backgroundColor('#ccc').border({ width: 1 }).padding(10)
  }
}

@Entry
@Component
struct BuildParamPage2 {
  @State message: string = 'Hello World';

  @Builder
  MySlot() {
    Row() {
      Text('我是Builder插槽')
    }
    .onClick(() => {
      promptAction.showToast({
        message: this.message
      })
    })
    .border({ width: 1 })
    .width('100%')
    .padding(10)
    .margin({ top: 10 })
  }

  build() {
    Column() {
      MyComp1({

        // 这里通过俩种方式传递 
        // @Builder MySlot()通过this.MySlot的形式传给子组件@BuilderParam slot,this指向在MyComp1的message
        slot: this.MySlot,
        // 通过():void=>{this.MySlot()}的形式传给子组件@BuilderParam slot1,因为箭头函数的this指向的是宿主对象,所以message的值为“Hello World”。
        slot1: (): void => {
          this.MySlot()
        }
      })


      // 解释:
      // 下面使用如果针对卡槽业务的话错误
      // @Builder 是自定义构建函数,分为内部和全局,非箭头函数.下面只是嵌套与插槽业务无关
      //
      // MyComp1() {
      //   this.MySlot()
      // }

    }
  }
}
分享
微博
QQ
微信
回复
3天前
相关问题
HarmonyOS this指向问题
29浏览 • 1回复 待解决
HarmonyOS 关于使用@BuilderParam问题
420浏览 • 1回复 待解决
HarmonyOS this指向问题
52浏览 • 2回复 待解决
HarmonyOS 如何定义组件插槽
370浏览 • 1回复 待解决
如何实现类似插槽功能
1968浏览 • 1回复 待解决
如果要实现插槽功能要如何实现
416浏览 • 1回复 待解决
HarmonyOS slot插槽
25浏览 • 1回复 待解决
@BuilderParam修饰属性报错
1783浏览 • 1回复 待解决
popup组件气泡框指向颜色怎么修改?
7401浏览 • 1回复 待解决
HarmonyOS 滑动组件问题
35浏览 • 1回复 待解决
网络连接管理connection中this指向问题
622浏览 • 1回复 待解决
@BuilderParam 不支持普通class变量
807浏览 • 1回复 待解决