Blazor

Question

我有一个 Blazor 组件，它由一个包含在 @if 指令 (IsVisible) 中的 div 组成。 div 有一个@ref。呈现组件时，IsVisible 为 false。我的组件有一个方法 (Show())，该方法将 IsVisible 设置为 true 并使用对 div 的引用。但是引用总是空的（没有上下文也没有 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
  }
}

Answer 1

典型的组件误解示例：StateHasChanged 重新渲染组件。不，它将渲染事件排队到渲染器的队列中。在您的代码中，直到 Show 结束时才会发生这种情况 - 它是一个同步代码块，因此在渲染器获得任何线程时间之前运行完成。您正在检查 MyRef 是否存在。

您需要修改Show.

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

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

Blazor - How to manager @ref for initial invisible part of a component

components