HarmonyOS 鸿蒙Next 父组件调用子组件方法，类似react ref的使用方式

HarmonyOS 鸿蒙Next 父组件调用子组件方法，类似react ref的使用方式

ets中目前没有类似react ref 的实现方式，如果父组件想要调用子组件的方法，可以参考一下下面代码：

父组件调用 Layout，并且传递controller进去

// 父组件
import { Layout, LayoutController } from '../view/Layout'

@Entry
@Component
struct Index {
  private communication: LayoutController = new LayoutController()

  build() {
    Column() {
      Layout({ controller: this.communication }) {
        Button("哈哈哈")
          .fontColor(Color.Blue).onClick(() => {
          this.communication.setHeight(100)
        }).width(100).height(50)
      }
    }
  }
}

子组件声明 controller 并且在aboutToAppear生命周期中给对应的函数赋值

// 子组件

export class LayoutController {
  constructor() {

  }

  setHeight: (height: number) => void


  open: (height: number) => void

}

@Component
export struct Layout {
  controller: LayoutController
  @BuilderParam builder: () => {};
  @State statusHeight: number = 0;

  setHeight(
    height: number
  ): void {
    console.log(`设置，${height}`)
    this.statusHeight = height
  }

  aboutToAppear() {
    if(this.controller) {
      this.controller.setHeight = this.setHeight.bind(this)
    }
    // window.getLastWindow(getContext(this)).then(currentWindow => {
    //   let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_CUTOUT);
    //   this.statusHeight = avoidArea.topRect.height
    // })
  }

  build() {
    Column() {
      Column().height(this.statusHeight).backgroundColor("red")
      this.builder()
    }.height("100%")
  }
}

这样在父组件中调用setHeight方法，即可调用子组件的方法。


更多关于HarmonyOS 鸿蒙Next 父组件调用子组件方法，类似react ref的使用方式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

https://developer.huawei.com/consumer/cn/forum/topic/0202140470508418066?fid=0102683795438680754

class ComponentRef<T> {
  value: T

  export(ref: T) {
    this.value = ref
  }

  static useRef<T>() {
    return new ComponentRef<T>()
  }
}

@Component
struct Parent {
  childrenRef = ComponentRef useRef<{ change: Function }>();

  build() {
    Column({ space: 20 }) {
      Children({ childrenRef: this.childrenRef })
      Button("change children").onClick(() => {
        this.childrenRef.value?.change()
      })
    }
    .height("100%")
    .width("100%")
    .justifyContent(FlexAlign.Center)
  }
}

@Component
struct Children {
  @State text: string = "ok"
  childrenRef: ComponentRef<{ change: Function }>

  ref() {
    return {
      change: () => this.text = "change"
    }
  }

  build() {
    Column() {
      Text(this.text)
    }
  }

  aboutToAppear() {
    //export
    this.childrenRef.export(this.ref())
  }
}

更多关于HarmonyOS 鸿蒙Next 父组件调用子组件方法，类似react ref的使用方式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


子组件的controller 是父组件的一个复制的值吧，引用不是一个，所以这样，在给子组件setHeight赋值时，父组件的setHeight还是空吧，会报错的

就用的你的代码。

我的api是10。

我是个人开发者，目前没有api10的权限，不过可以看一下是不是LayoutController定义的有问题导致的，

我本地会报这个错误

Property ‘open’ has no initializer and is not definitely assigned in the constructor.

而且没法bind(this)

项目名称

  • 状态：已上线
  • 语言：Java
  • 框架：Spring Boot
  • 数据库：MySQL

项目描述

这是一个简单的博客系统，用户可以发布文章、评论以及管理自己的文章。

功能列表

  • 用户注册与登录
  • 发布文章
  • 查看文章列表
  • 文章搜索
  • 评论功能
  • 管理员后台
  • 数据统计

技术选型

  • 前端：Vue.js
  • 后端：Spring Boot
  • 数据库：MySQL
  • 版本控制：Git
  • 部署：Docker

团队成员

  • 张三（项目经理）
  • 李四（前端开发）
  • 王五（后端开发）
  • 赵六（测试）

在HarmonyOS鸿蒙Next中，父组件调用子组件方法可以通过@Component和@State等装饰器结合this.refs实现。首先，在子组件中定义需要调用的方法，并使用@Component装饰器声明组件。然后，在父组件中使用@State装饰器管理子组件的引用，并通过this.refs获取子组件实例，进而调用其方法。

例如，子组件ChildComponent中定义doSomething方法：

@Component
struct ChildComponent {
  doSomething() {
    // 子组件方法逻辑
  }
}

父组件ParentComponent中通过this.refs调用子组件方法：

@Component
struct ParentComponent {
  @State childRef: ChildComponent | null = null;

  build() {
    Column() {
      ChildComponent({ ref: (ref) => { this.childRef = ref; } })
      Button('调用子组件方法')
        .onClick(() => {
          if (this.childRef) {
            this.childRef.doSomething();
          }
        })
    }
  }
}

这种方式类似于React中的ref，允许父组件直接操作子组件的方法。

回到顶部