Blazor WASM通过多个属性(相当于React｛..props｝)

Question

我正在Blazor WASM中制作一个组件的变体，请参阅下面的示例。但由于这是一个变体，我希望在不重新定义变体组件中的所有内容的情况下传递原始属性。

// VariantTextField.razor
<OriginalTextField Value1="@Value1" Value2="@Value2">...<OriginalTextField/>
@code {
[Parameter]
public string Value1 { get; set; }
[Parameter]
public string Value2 { get; set; }
}

例如，在React中，你可以这样做来传递道具：

function ComponentVariant(props) {
let value1 = "..."
return <OriginalComponent value1=value1 {...props}>...</OriginalComponent>;
^^^^^
}

有类似Blazor WASM的吗？

Answer 1

在Blazor中，这被称为arbitrary parameters。它会将所有不匹配的属性添加到相应的元素中。如果您有许多不一定需要预定义的属性，这将很有帮助。

因此，您将定义类型为IDictionary<string, object>?的component parameter，并添加[parameter属性。但这次您将添加CaptureUnmatchedValues并将其设置为true。

以下是工作代码示例

组件视图：

<div @attributes="AdditionalAttributes" extra="5" />
@code {
[Parameter(CaptureUnmatchedValues = true)]
public IDictionary<string, object>? AdditionalAttributes { get; set; }
}

父视图：

<AttributeOrderChild1 extra="10" />

此外，请注意，该示例显示了priority，这意味着如果元素具有现有属性，它将不会被替换/更改。在我们的情况下，extra attribute的值是5。

Microsoft文档到arbitrary attributes：任意参数