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

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

blazor components

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;
  }