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

Question

我有一个Blazor组件，它由包含在@if指令(IsVisible(中的一个div组成。div有一个@ref。渲染组件时，IsVisible为false。我的组件有一个方法(Show(((，它将IsVisible设置为true并使用对div的引用。但引用总是null(没有Context和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结束才会发生——它是一个同步代码块，因此在Renderer获得任何线程时间之前运行到完成。您正在检查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;
}