OpenHarmony开发者论坛

标题: @State状态声明的变量发生改变后，子组件UI没有发生变化 [打印本页]
作者: xtaichi    时间: 2023-11-14 12:57
标题: @State状态声明的变量发生改变后，子组件UI没有发生变化
本帖最后由 hyacinth养花人 于 2023-11-14 14:17 编辑

[md]页面内写了一个webview组件和一个自定义的TitleBar组件，@State的title传递给TitleBar显示，当网页加载完成后，回调onTitleReceive，给@State的title赋值，但是UI没有更新，请问是什么问题呢？

[/md]
作者: westinyang    时间: 2023-11-14 14:33
[md]@State装饰器的作用只是在当前组件中，而你把title传递给了自定义的子组件，所以你需要使用 @Prop装饰器 装饰子组件TitleBar中的title变量，这样可以与父组件中的 @State title 建立单向同步，当然也可以使用 @Link 建立双向同步！

[/md]
作者: mean    时间: 2023-11-14 14:52
标题: @State状态声明的变量发生改变后，子组件UI没有发生变化
双向绑定应该使用@Link
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview'

  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   controller: web_webview.WebviewController = new web_webview.WebviewController();
  8.   @State title: string = '标题'

  10.   build() {
  11.     Column() {
  12.       TitleBar({title: this.title})

  14.       Web({ src: 'www.openharmony.cn', controller: this.controller })
  15.         .onTitleReceive((event) => {
  16.           this.title = event.title
  17.         })
  18.     }
  19.   }
  20. }

  22. @Component
  23. struct TitleBar{
  24.   @Link title:string;
  25.   build(){
  26.    Column(){
  27.      Text(this.title)
  28.        .fontSize(30)
  29.    }
  30.     .width('100%')
  31.     .height(50)
  32.     .backgroundColor('#f7f8fa')
  33.     .padding({top: 10, bottom: 10})
  34.   }
  35. }
复制代码





欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/) Powered by Discuz! X3.5