如何在Blazor网格组件中使用CascadingTypeParam传递TItem？

核心思路 #

利用Blazor的[CascadingTypeParameter]特性，在Grid根组件上声明泛型类型参数，让它自动向下级联到所有子组件，无需手动在每个子组件上指定类型，哪怕有多层嵌套也能穿透传递。

具体实现步骤 #

1. 改造Grid根组件 #

将Grid改为泛型组件，用[CascadingTypeParameter]标记泛型参数，同时保留Items属性：

using Microsoft.AspNetCore.Components;

public partial class Grid<TItem> : ComponentBase
{
    [Parameter, EditorRequired]
    public IEnumerable<TItem> Items { get; set; } = Enumerable.Empty<TItem>();

    // 标记该泛型参数为可级联传递的类型
    [CascadingTypeParameter]
    private readonly TItem? _cascadedItem = default;
}

这里的_cascadedItem不需要实际赋值，仅作为类型标记，Blazor会自动处理类型的级联逻辑。

2. 改造GridColumn组件 #

移除GridColumn的TItem泛型参数声明，直接使用TItem类型即可，Blazor会自动从父级的级联中匹配类型：

using Microsoft.AspNetCore.Components;

public partial class GridColumn : ComponentBase
{
    // 直接使用TItem类型，无需手动指定
    [Parameter]
    public RenderFragment<TItem>? ChildContent { get; set; }

    // 业务逻辑中也可直接使用TItem类型
    private void HandleItem(TItem item)
    {
        // 自定义逻辑
    }
}

3. 中间组件无需额外处理 #

像GridHeader这类嵌套在Grid和GridColumn之间的组件，不需要添加任何级联相关代码，CascadingTypeParameter会自动穿透传递类型：

using Microsoft.AspNetCore.Components;

public partial class GridHeader : ComponentBase
{
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

使用示例 #

现在就能按你期望的方式使用组件，只需在Grid上指定一次TItem：

<Grid Items="Transactions" TItem="Transaction">
    <GridHeader>
        <GridColumn>ID</GridColumn>
        <GridColumn>Date</GridColumn>
    </GridHeader>
</Grid>

关键说明 #

• [CascadingTypeParameter]是.NET 6及以上Blazor版本引入的特性，专门用于简化泛型类型的级联传递，比传统的CascadingParameter传递类型更简洁高效。
• 只要子组件中使用了TItem类型，Blazor会自动匹配父级级联的类型，无需手动传递参数。
• 无论嵌套层级有多深，类型都会自动向下传递，无需在中间组件做额外配置。

内容的提问来源于stack exchange，提问作者Musaffar Patel