Blazor WASM如何实现类似React {...props}的多属性透传？

Blazor WASM 有完全等价的属性透传方案，核心靠 @attributes 指令配合 [Parameter(CaptureUnmatchedValues = true)] 特性实现，分两种场景说明：

1. 基础透传（无需修改原组件参数） #

如果变体组件只是封装原组件、不需要调整任何参数，直接用 @attributes 就能把所有传入变体的参数透传给原组件：

// VariantTextField.razor
<OriginalTextField @attributes>...</OriginalTextField>

2. 覆盖部分参数后透传剩余属性 #

如果需要给原组件的某些参数设置固定值，同时透传其他未显式定义的参数，就用 [Parameter(CaptureUnmatchedValues = true)] 捕获剩余参数，再通过 @attributes 传递：

// VariantTextField.razor
<OriginalTextField Value1="自定义固定值" @attributes="@RemainingAttributes">
    <!-- 变体组件的自定义内容 -->
</OriginalTextField>

@code {
    // 定义变体专属或需要覆盖的参数（可选）
    [Parameter]
    public string VariantSpecificParam { get; set; }

    // 捕获所有未显式定义的传入参数
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> RemainingAttributes { get; set; }
}

原理说明 #

• [Parameter(CaptureUnmatchedValues = true)] 会自动收集所有传入变体组件、但未在组件代码中显式声明为 [Parameter] 的属性，存入指定字典。
• @attributes="@RemainingAttributes" 会把字典里的属性展开传递给原组件，效果和 React 的 {...props} 完全一致。
• 显式定义的参数（比如上面的 VariantSpecificParam）不会被存入 RemainingAttributes，避免重复传递。

这样你不用手动重复定义原组件的所有参数，只需处理变体需要自定义的部分即可。

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