如何遍历 Blazor 中的子组件

Question

我正在尝试让父组件使用 foreach 来遍历 Blazor 中的子组件。例如，我有一个 Button 组件，并且希望能够将它嵌套在一个 ButtonGroup 组件中，该组件在每个 Button 周围添加填充。我的代码返回“方法的类型参数......无法从用法中推断出来。尝试明确指定类型参数。”不知道如何实现。任何帮助表示赞赏。

Index.razor

<ButtonGroup>
  <Button>Howdy</Button>
  <Button>Doody</Button>
 </ButtonGroup>

Button.razor

<a href="@Url" class="btn btn-primary">@ChildContent</a>

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

ButtonGroup.razor

@typeparam TItem

<div class="flex flex-wrap py-16 mx-n4">
  @foreach (var item in Items)
  {
  <div class="px-4 d-ib">
    @ChildContent(item)
  </div>
  }
</div>

@code {
  [Parameter] public RenderFragment<TItem> ChildContent { get; set; }
  [Parameter] public IReadOnlyList<TItem> Items { get; set; }
}

Answer 1

看来您需要使用ChildContent 与您使用的方法稍有不同。按照 Blazor 的约定，ChildContent 用于指示在组件的开始标签和结束标签之间插入标记的位置，在只有一个部分需要片段的情况下。这意味着您的 Button.razor 组件编写正确。

但是，当您进入按钮组时，事情就会发生变化，您可以采取几种方法。模板化的组件会让你到达那里，但如果你使用带有 ChildContent 的嵌套组件来获得你需要的东西，这会更简单。

从您的 ButtonGroup.razor 开始，您可以进行简化，以便按钮组只获取子内容并放置它，在您的情况下将是一个简单的包装器，因此 CSS 可以完成它需要做的事情：

<div class="flex flex-wrap py-16 mx-n4">
    @ChildContent
</div>

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

请注意，由于这是一个简单的包装器，您可以删除通用的 TItem 并将其用作布局工具。

然后，将树向上提升一级，此处 是您迭代列表的地方，您应该具体说明在此级别嵌套的组件。请注意Button 和ButtonGroup 的嵌套，我假设您在列表中用于ItemType 的类型具有Url 和ButtonName 的属性，但您明白了，您可以在需要的地方进行限制。

<ButtonGroup>
    @foreach (var item in Items ) {
        <div class="px-4 d-ib">
            <Button Url="@item.Url">@item.ButtonName</Button>
        </div>
</ButtonGroup>

@code {

    [Parameter] public IReadOnlyList<ItemType> Items { get; set; }

}

这样，每个组件的标签之间嵌套的任何内容都会在生成的标记中占有一席之地，因此您的 ButtonGroup 包围了您的所有 Button 组件，它们依次呈现按钮名称，但是 一切仍然在最高层受命和控制。

您当然可以使用模板化组件做同样的事情，而且有时它们是必要的，但对于您的用例，它们需要在顶层大致相同或更多的代码，并且对于您想要的东西来说太过分了做。