如何为Blazor自定义列表组件传递多组不同HTML参数？

你可以通过子组件作为数据容器+父组件自动收集子项的方式实现需求，无需提前定义固定模板或创建大量组件类，具体方案如下：

1. 定义子项容器组件 #

创建AppBoardItem.razor，作为每个子项的载体，负责传递标题和内容：

@* 仅作为数据容器，自身不渲染可见内容 *@
@code {
    [Parameter]
    public string Title { get; set; } = string.Empty;

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    // 级联参数关联父组件，让父组件能收集当前子项
    [CascadingParameter]
    public AppBoard? ParentBoard { get; set; }

    protected override void OnInitialized()
    {
        ParentBoard?.AddItem(this);
    }

    protected override void OnDisposed()
    {
        ParentBoard?.RemoveItem(this);
    }
}

2. 修改父组件AppBoard.razor #

让父组件自动收集子项，统一渲染公共包裹结构并添加禁用逻辑：

<div class="list">
    @foreach (var (item, index) in _items.Select((item, idx) => (item, idx)))
    {
        <div class="child" @disabled="@(CurrentStep < index)">
            <p>Row @(index + 1): @item.Title</p>
            <div class="row-content">
                @item.ChildContent
            </div>
        </div>
    }
</div>

@code {
    private List<AppBoardItem> _items = new();

    [Parameter]
    public int CurrentStep { get; set; } = -1;

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    public void AddItem(AppBoardItem item)
    {
        if (!_items.Contains(item))
        {
            _items.Add(item);
            StateHasChanged();
        }
    }

    public void RemoveItem(AppBoardItem item)
    {
        if (_items.Contains(item))
        {
            _items.Remove(item);
            StateHasChanged();
        }
    }
}

3. 在Index.razor中使用组件 #

直接嵌套AppBoardItem即可，每个子项可以自由定义内容：

<AppBoard CurrentStep="1">
    <AppBoardItem Title="Paragraph">
        <p>May have any HTML content</p>
    </AppBoardItem>
    <AppBoardItem Title="Link">
        <a href="https://example.com">Example Link</a>
    </AppBoardItem>
    <AppBoardItem Title="Custom HTML">
        <div>Could be anything in here</div>
        <button @onclick="OnButtonClicked">Click Me</button>
    </AppBoardItem>
</AppBoard>

@code {
    private void OnButtonClicked()
    {
        // 自定义按钮点击逻辑
    }
}

方案优势 #

• 无需提前构造数据列表，父组件自动收集子项，使用方式更直观
• 每个子项支持任意HTML或Blazor组件内容，完全由父组件控制
• 公共包裹结构、禁用逻辑统一在父组件实现，保证代码复用性
• 子组件仅作为轻量数据载体，无冗余渲染逻辑

内容的提问来源于stack exchange，提问作者Luke Vo