基本组件

Question

我正在使用Blazorise，它提供带有多个参数的多个基本组件，例如<Button>。我想创建一个简单的组件，该组件将呈现带有一个或两个硬编码参数（例如<Button>的{{1}}，然后将其余参数传递到Color="Colors.Primary")上。 / p>

这是我想写的：

<Button>

我想实现这一目标，而不必手动设置<PrimaryButton Outline>Text</Button>中<Button>可用的所有参数。我一直在寻找一种方法来执行此操作，但是找不到任何东西。甚至有可能吗？

我已经尝试从PrimaryButton.razor继承并编写Button，但是隐式参数被丢弃了。

Answer 1

我认为您仍然必须通过将它们添加到自定义组件中来将它们作为参数传递。例如，您可以设置一个Color和Outline的按钮，但是传递Block参数。

/* PrimaryButton.razor */
<Button Color="Color.Primary" Outline="true" Block="@Block">@ChildContent</Button>

@code {
  [Parameter] public bool Block { get; set;}
  [Parameter] public RenderFragment ChildContent { get; set; }
}

然后您可以将该新组件用作

<PrimaryButton Block="true">Some Text</PrimaryButton>

Answer 2

您可以为此使用“属性拼写”

假设您的基本组件已定义

<h1>Base Component</h1>
<div>Param1 = @Param1</div>
<div>Param2 = @Param2</div>
@code
{
    [Parameter] public string Param1 { get; set; }
    [Parameter] public string Param2 { get; set; }
}

并且您想预填充Param1，因此创建一个新的MyComponent

<BaseComponent Param1="predefined" @attributes=Attributes/>
@code
{
  [Parameter(CaptureUnmatchedValues=true)] 
  public Dictionary<string,object> Attributes { get; set; }       
}

现在，您可以使用MyComponent代替BaseComponent，并且如果您不为Param1提供值，则将对其进行预定义（在这种情况下，实际上是该值）

这个标记：

<BaseComponent Param1="base" Param2="component"/>

<MyComponent Param1="my" Param2="component"/>

<MyComponent Param2="component"/>

产生此输出：

基本组件

Param1 =基本参数2 =组件

基本组件

Param1 =我的参数2 =组件

基本组件

Param1 =预定义参数2 =组件

在BlazorRepl上查看实时示例：https://blazorrepl.com/repl/QEvucNFB408fLIXd18

将默认参数应用于其他组件的组件

2 个答案:

基本组件

基本组件

基本组件