在 Blazor 中获取子组件列表的最佳方法答案

【问题标题】：Best way to get list of child components in Blazor在 Blazor 中获取子组件列表的最佳方法
【发布时间】：2020-09-15 08:48:13
【问题描述】：

我们需要在父组件的OnAfterRenderAsync 方法中获取子组件的列表，但是我们不知道该怎么做。我们尝试使用RenderBuilder 和GetFrames，但这始终为空。我们有具有 N 个拆分区域作为子组件的 Splitter 组件，我们需要在 OnAfterRenderAsync 方法中获取父组件中的所有区域。

【问题讨论】：

标签： c# .net asp.net-core blazor

【解决方案1】：

如果您有一个 X 类型的父组件，并且您想要引用所有 Y 类型的紧密耦合子组件（例如，TabControl 和 TabPages），那么您可以这样做。

1：在 Parent 中，在 @ChildContent 周围添加一个包装器，以添加指向自身的级联值。

<CascadingValue Value=@this>
  @ChildContent
</CascadingValue>

2：在您的孩子中，您可以通过 CascadingParameter 消费该值

@code
{
  [CascadingParameter]
  public YourParentComponent ParentComponent { get; set; }
}

3：您的孩子可以通知他们的父母他们的存在

protected override void OnInitialized()
{
    if (ParentComponent == null)
      throw .............("Must be used within MyParentComponent");
    MyParentComponent.AddChild(this);
}

如果您的子组件是有条件地呈现的，那么让它们实现 IDisposable 以便它们可以通知父组件从其列表中删除它们。

在 Blazor 大学有一个例子展示了如何创建 TabControl - https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/

【讨论】：

@Kristijan Mihaljinac，我建议您在选择使用 CascadingValue 之前先阅读一下。在 github 中搜索涉及 CascadingValue 使用的问题。这是一篇文章的链接，您可以在文章末尾阅读作者得出的结论。没有人声称它是一种无用的方法，根本不是，它是 Blazor 的一部分，但您必须意识到它的局限性和问题源于它的使用。 chrissainty.com/…
您唯一需要记住的是使用IsFixed=@true 以获得额外的速度。就是这样。
如果孩子的数量动态变化怎么办。例如 ChildContent 看起来像这样：@if(checkboxValue) { <Child /> } <Child />。如何让孩子按正确的顺序排列？
如果你想知道它们的顺序，你必须查看生成它们的数据。