Razor 如何在循环中呈现组件列表（Blazor）？

我肯定错过了blazor很明显的东西。。。我只想呈现一个包含组件的列表，但是没有（明显的？）方法引用迭代器（组件）进行呈现

托多利斯特剃须刀

<input @bind="_newTodo" />
<button @onclick="@AddTodoItem">+</button>

@foreach (TodoItem todoItem in _todoItems)
{
    // todoItem is a razor component, yet I can't simply render it here?
    // <todoItem />
}

@code {
    private IList<TodoItem> _todoItems = new List<TodoItem>();
    private string _newTodo;

    private void AddTodoItem()
    {
        if (!string.IsNullOrWhiteSpace(_newTodo))
        {
            _todoItems.Add(new TodoItem { Title = _newTodo });
            _newTodo = string.Empty;
        }
    }
}

+
@foreach（TodoItem TodoItem in_todoItems）
{
//todoItem是一个razor组件，但我不能在这里简单地渲染它？
// 
}
@代码{
私有IList_todoItems=新列表（）；
私有字符串_newTodo；
私有void AddTodoItem（）
{
如果（！string.IsNullOrWhiteSpace（_newTodo））
{
_Add（新的TodoItem{Title=\u newTodo}）；
_newTodo=string.Empty；
}
}
}

剃须刀

<span>@Title</span>

@code {
    public string Title { get; set; }
}

@Title
@代码{
公共字符串标题{get；set；}
}

在React中，这是一件非常简单的事情，可以像你刚才做的那样工作，但在Blazor中，我认为你不能像现在这样做

一种解决方案是使用一个类来保存组件属性并将属性传递给它

<input @bind="_newTodo" />
<button @onclick="@AddTodoItem">+</button>

@foreach (TodoItem todoItem in _todoItemsDto)
{
    // Pass the Dto properties to the component
    <TodoItem Title="@todoItem.Title" />
}

@code {
    private IList<TodoItemDto> _todoItemsDto = new List<TodoItemDto>();
    private string _newTodo;

    class TodoItemDto {
        public string Title { get; set; }
    }

    private void AddTodoItem()
    {
        if (!string.IsNullOrWhiteSpace(_newTodo))
        {
            _todoItems.Add(new TodoItemDto { Title = _newTodo });
            _newTodo = string.Empty;
        }
    }
}

+
@foreach（TodoItem TodoItem in _ToDoItemsTo）
{
//将Dto属性传递给组件
}
@代码{
private IList_todoItemsDto=新列表（）；
私有字符串_newTodo；
类TodoItemDto{
公共字符串标题{get；set；}
}
私有void AddTodoItem（）
{
如果（！string.IsNullOrWhiteSpace（_newTodo））
{
_Add（新的TodoItemDto{Title=_newTodo}）；
_newTodo=string.Empty；
}
}
}

我刚刚构建了一个带有LinkButton组件的帮助系统，我将其呈现如下：

 foreach (HelpCategory category in Categories)
 {
     <LinkButton Category=category Parent=this></LinkButton>
     <br />
 }

foreach（类别中的帮助类别）
{


}

每个帮助类别都有一个或多个可扩展的帮助文章

下面是我的LinkButton的代码，它做的更多是相同的：

@using DataJuggler.UltimateHelper.Core
@using ObjectLibrary.BusinessObjects

@if (HasCategory)
{
    <button class="linkbutton" 
    @onclick="SelectCategory">@Category.Name</button>

    @if (Selected)
    {
        <div class="categorydetail">
            @Category.Description
        </div>
        <br />
        <div class="margintop">
            @if (ListHelper.HasOneOrMoreItems(Category.HelpArticles))
            {
                foreach (HelpArticle article in Category.HelpArticles)
                {
                    <ArticleViewer HelpArticle=article Parent=this> 
                    </ArticleViewer>
                    <br />
                    <div class="smallline"></div>
                }
            }
        </div>
    }
}

@使用DataJuggler.UltimateHelper.Core
@使用ObjectLibrary.BusinessObjects
@如果（类别）
{
@类别.名称
@如果（选定）
{
@类别.说明


@if（ListHelper.HasOneOrMoreItems（Category.HelpArticles））
{
foreach（类别中的帮助文章.帮助文章）
{


}
}
}
}

这是我在当地采用的解决方案之一——我真的希望有更好的解决方案。如果我找到了，我会继续调查和自我回答。否则这就是答案。@Mariocach我也这么做了，但到目前为止。。。没什么好的。Blazor仍处于起步阶段，错过了很多功能。blazor团队表示，在2020年11月发布的.net 5版本中，他们肯定会有这样的功能：