代码之家  ›  专栏  ›  技术社区  ›  Olof

Blazor-如何管理组件初始不可见部分的@ref

  •  0
  • Olof  · 技术社区  · 3 年前

    我有一个Blazor组件,它由@if指令(IsVisible)中包含的一个div组成。div有一个@ref。渲染组件时,IsVisible为false。我的组件有一个方法(Show()),该方法将IsVisible设置为true,并使用对div的引用。但该引用始终为null(无上下文和Id)。

    @if (IsVisible)
    {
      <div @ref="MyRef">Bla bla bla</div>
    }
    
    @code {
      bool IsVisible = false;
      ElementReference MyRef;
      public void Show()
      {
        IsVisible = true;
        StateHasChanged();
        // here, MyRef has no Context and no Id
      }
    }
    
    0 回复  |  直到 3 年前
        1
  •  0
  •   MrC aka Shaun Curtis    3 年前

    典型组件误解的一个示例: StateHasChanged 重新渲染组件。否,它将渲染事件排入渲染器队列。在您的代码中,直到 Show -它是一个同步的代码块,因此在渲染器获得任何线程时间之前运行到完成。您正在检查 MyRef 在它存在之前。

    您需要修改 显示

        public async Task Show()
        {
            IsVisible = true;
            StateHasChanged();
            // Yields and lets the Renderer service it's queue
            await Task.Yield();
            // or await Task.Delay(1);
            // now we exist
            var x = MyRef;
      }
    
    推荐文章