c# - Razor 页面等待 Blazor 组件完成渲染的规范方式是什么？

Question

Razor 组件和页面都有一个 OnAfterRender生命周期方法。当您有 <SomeComponent>在您的 index.razor , index.razor的 OnAfterRender首先触发，然后是 SomeComponent.OnAfterRender之后发生火灾。

假设在 Razor 页面上你需要做一些工作，但只能在SomeComponent.OnAfterRender之后才能做。火灾。这样做的合适方法是什么？

这很重要，因为组件的支持 HTML 直到它的 OnAfterRender 才准备好(可能不存在)。火灾。换句话说， Razor 页面作者如何知道其组件何时相当于 DOM 就绪？

Answer 1

你可以让你的子组件暴露一个 Action它在呈现后执行的参数，就像这样。

[Parameter]
public Action AfterRender { get; set; }

protected override OnAfterRender(bool firstRender)
{
  Action?.Invoke();
}

在父

<MyChild AfterRender=@SomeMethodInParentComponent/>

我建议 Action而不是 EventCallback因为我怀疑可能会发生以下过​​程

在 EventCallback 之后，Blazor 在被调用者(父)上调用 StateHasChanged

父级重新渲染

父级在子级上设置参数(我们创建的 AfterRender 参数)

如果参数的任何状态发生变化，子项将重新渲染

您的子组件的 OnAfterRender方法将调用其 AfterRender参数

重复步骤 1

使用 Action而不是 EventCallback将避免这种情况。

但是，如果您将其他参数值(可能会更改)从父级传递给子级，则应使用 EventCallback。在这种情况下，您需要覆盖 ShouldRender在您的子组件中，因此它仅在其工作状态实际发生变化时才呈现。

您可以通过覆盖 SetParametersAsync 来检查状态是否已更改。并做这样的事情。

private bool NeedsRendering = true; // Always true for first render

protected override bool ShouldRender => NeedsRendering; // Render only if we say so

protected override void SetParameters(ParameterView parameters)
{
  string oldProperty1 = Property1;
  byte oldSomethingElse = SomethingElse;

  base.SetParameters(parameters);

  if (oldProperty1 != Property1 || oldSomethingElse != somethingElse)
  {
    NeedsRendering = true;
  }
}

protected override async Task OnAfterRenderAsync()
{
  NeedsRendering = false; // We are up to do, not more renders until state changes
  // Do your other stuff
  AfterRender?.Invoke();
}