如何以标记而非属性的方式为Blazor组件添加项列表

1. 定义选项数据模型 #

先创建存储选项Key和显示值的基础模型：

public class CustomSelectItem
{
    public string Key { get; set; } = string.Empty;
    public string Value { get; set; } = string.Empty;
}

2. 实现自定义组件 MyCustomComponent.razor #

组件通过嵌套<Item>子组件自动收集选项，同时支持双向绑定：

<!-- 组件渲染区域 -->
<div class="custom-select-container">
    @foreach (var item in _items)
    {
        <div class="select-option" @onclick="() => TriggerSelection(item.Key)">
            @if (item.Key == Value)
            {
                <span class="selected-option">@item.Value</span>
            }
            else
            {
                <span>@item.Value</span>
            }
        </div>
    }
</div>

<!-- 渲染Items片段，触发子<Item>组件初始化 -->
@Items

@code {
    // 双向绑定的绑定值参数
    [Parameter]
    public string? Value { get; set; }

    // 绑定值变更回调
    [Parameter]
    public EventCallback<string?> ValueChanged { get; set; }

    // 接收<Items>子内容的渲染片段
    [Parameter]
    public RenderFragment? Items { get; set; }

    // 存储收集到的选项列表
    private List<CustomSelectItem> _items = new();

    // 处理选项选中逻辑，触发绑定值变更
    private async Task TriggerSelection(string key)
    {
        await ValueChanged.InvokeAsync(key);
    }

    // 嵌套的<Item>子组件，用于定义单个选项
    public partial class Item : ComponentBase
    {
        // 级联参数，获取父组件实例
        [CascadingParameter]
        private MyCustomComponent? ParentComponent { get; set; }

        // 选项标识Key
        [Parameter]
        public string Key { get; set; } = string.Empty;

        // 选项显示文本
        [Parameter]
        public string Value { get; set; } = string.Empty;

        protected override void OnInitialized()
        {
            base.OnInitialized();
            // 将当前选项添加到父组件的选项集合中
            ParentComponent?._items.Add(new CustomSelectItem { Key = Key, Value = Value });
        }
    }
}

3. 在页面中使用组件 #

在TestPage.razor中按照需求调用组件：

@page "/test"

<h3>自定义组件测试</h3>

<MyCustomComponent @bind-Value="_selectedItem">
    <Items>
        <MyCustomComponent.Item Key="blah" Value="Something" />
        <MyCustomComponent.Item Key="foo" Value="Another Option" />
        <MyCustomComponent.Item Key="bar" Value="Third Choice" />
    </Items>
</MyCustomComponent>

<p>当前选中Key: @_selectedItem</p>

@code {
    private string? _selectedItem;
}

核心逻辑说明 #

• 嵌套的<Item>组件通过级联参数自动关联父组件，初始化时将自身的Key/Value添加到父组件的选项列表，无需手动通过属性传递集合。
• 双向绑定依赖Blazor原生的Value参数+ValueChanged回调机制，@bind-Value会自动完成两者的关联。
• 渲染部分可根据需求自由修改（比如改成下拉框、添加样式等），选项收集与绑定的核心逻辑保持不变。

内容的提问来源于stack exchange，提问作者Brien King