razor - 您如何在循环中呈现组件列表(Blazor)？

Question

我一定遗漏了一些非常明显的 blazor ......我想简单地渲染一个包含一个组件的列表，但是没有(明显的？)方法来引用迭代器(它是一个组件)进行渲染？

TodoList.razor

<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;
        }
    }
}

TodoItem.razor

<span>@Title</span>

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

Answer 1

在 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;
        }
    }
}