将多个子组件作为参数传递

Question

因此使用该组件将如下所示：

<ParentListComponent Header="Test">
   <ChildListItemComponent Name="1"/>
   <ChildListItemComponent Name="2"/>
   <ChildListItemComponent Name="3"/>
   <ChildListItemComponent Name="4"/>
</ParentListComponent>

ParentListComponent 看起来像这样：

@foreach(var childComponent in listComponents){
    @childComponent
}

@code{

   [Parameter]
   Public List<ChildListItemComponent> listComponents { get; set; }
}

我知道我可以通过将其作为 ChildContent 传递来轻松呈现它，如下所示，但我真的很想保留列表，以便我可以轻松地从父级访问每个项目。

[Parameter]
public RenderFragment ChildContent { get; set; }

我觉得我只是缺少这里的语法，但不幸的是我找不到这方面的信息。如果您能提供帮助，我将不胜感激。

Answer 1

您将创建一个 ParentComponent 和一个 ChildComponent。 ParentComponent 的 mark-up 将具有以下

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

@code
{
  [Parameter]
  public RenderFragment ChildContent { get; set; }
}

现在您的 children 将可以访问 parent，就像这样

[CascadingParameter]
public ParentComponent ParentComponent { get; set; }

在OnInitialized方法中你可以调用ParentComponent.RegisterChild(this);，在IDisposable.Dispose中你可以调用ParentComponent.UnregisterChild(this);

您可以将这些方法添加到 parent class 中以保留 ChildComponent 列表。

Blazor 大学 here 上有完整的 walk-through。

将多个子组件作为参数传递

Passing multiple child components as parameter

c#

blazor

blazor-server-side

blazor-client-side