如何在Blazor中迭代子组件

Question

我正试图让一个父组件使用foreach来迭代Blazor中的子组件。例如，我有一个Button组件，希望能够将其嵌套在ButtonGroup组件中，该组件在每个按钮周围添加填充。我的代码返回一个"；方法的类型参数。。。无法根据用法推断。请尝试显式指定类型参数"不知道如何完成。感谢您的帮助。

索引剃刀

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

按钮剃刀

<a href="@Url" class="btn btn-primary">@ChildContent</a>
@code {
[Parameter] public RenderFragment ChildContent { get; set; }
[Parameter] public string Url { get; set; }

ButtonGroup.rarzor

@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.rarzor组件编写正确。

然而，当你进入按钮组时，情况会发生变化，你可以采取几种方法。模板化组件会让你达到目的，但如果你使用带有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组件，它们依次呈现按钮名称，但所有内容仍在顶层进行口述和控制。

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