Blazor如何声明式传入组件列表作为参数实现嵌套组件调用

结论 #

你当前的实现方式不可行。

原因 #

Blazor 不支持直接将组件实例作为普通集合参数传递，你定义的List<Component2>类型的Inputs参数，无法直接接收你在父组件标签内声明的Component2实例。Blazor 处理组件内部嵌套内容的默认机制是RenderFragment类型，用于表示可直接渲染的 UI 片段。

解决方案 #

根据你的实际需求有两种实现方式： #

方案1：仅需要渲染传入的组件列表（无逻辑操作需求）

这是最简单的实现，完全兼容你期望的调用写法，只需要修改Component1的参数类型即可：

1. Component1 代码

@* 直接渲染传入的Inputs片段 *@
@Inputs

@code{
    [Parameter]
    public RenderFragment Inputs { get; set; }
}

2. Component2 代码不需要修改
3. 你期望的调用方式可以直接正常运行：

<Component1>
    <Inputs>
        <Component2 Header="hello" />
        <Component2 Header="world" />
    </Inputs>
</Component1>

方案2：需要在Component1的C#代码中访问/操作Component2实例的属性

如果你需要在父组件的业务逻辑中拿到每个Component2的实例（比如读取所有Header值做校验、聚合等操作），可以通过级联参数+子组件注册的方式实现：

1. 修改Component1代码

<CascadingValue Value="this" IsFixed="true">
    @* 先渲染Inputs片段触发子组件注册 *@
    @Inputs
</CascadingValue>

@* 遍历渲染已注册的子组件，也可以在这里加自定义逻辑 *@
@foreach(Component2 input in Inputs)
{
    <div class="custom-wrapper">
        @input
    </div>
}
 
@code{
    [Parameter]
    public RenderFragment Inputs { get; set; }
    public List<Component2> Inputs {get; set;} = new();

    // 提供子组件注册方法
    public void RegisterComponent(Component2 comp)
    {
        if (!Inputs.Contains(comp))
        {
            Inputs.Add(comp);
            StateHasChanged();
        }
    }

    // 提供子组件注销方法，避免内存泄漏
    public void UnRegisterComponent(Component2 comp)
    {
        if (Inputs.Contains(comp))
        {
            Inputs.Remove(comp);
            StateHasChanged();
        }
    }
}

2. 修改Component2代码

<h1>@Header</h1>

@code{
    [CascadingParameter]
    public Component1 Parent { get; set; }

    [Parameter]
    public string Header {get; set;}

    protected override void OnInitialized()
    {
        base.OnInitialized();
        Parent?.RegisterComponent(this);
    }

    // 实现IDisposable接口，组件销毁时注销
    void IDisposable.Dispose()
    {
        Parent?.UnRegisterComponent(this);
    }
}

3. 调用方式和你期望的完全一致，不需要修改。

内容的提问来源于stack exchange，提问作者Travis Pettry