Komponen yang menerapkan parameter default ke komponen lain

Question

Saya menggunakan Blazorise, yang menyediakan beberapa komponen dasar seperti <Button>, dengan beberapa parameter. Saya ingin membuat komponen sederhana yang akan membuat <Button>dengan satu atau dua parameter hard-coded (seperti Color="Colors.Primary")dan kemudian meneruskan parameter lainnya ke <Button>.

Inilah yang ingin saya tulis:

<PrimaryButton Outline>Text</Button>

Saya ingin mencapai ini tanpa harus mengatur semua parameter yang tersedia secara manual dari <Button>dalam PrimaryButton.razor. Saya telah mencari cara untuk melakukan ini selama beberapa waktu tetapi tidak dapat menemukan apa pun. Apakah itu mungkin?

Saya sudah mencoba mewarisi dari Buttondan menulis <Button @attributes="@Attributes" Color="Colors.Primary">tetapi parameter implisit dibuang.

Answer 1

Saya pikir Anda masih harus meneruskannya sebagai parameter dengan menambahkannya ke komponen khusus Anda. Misalnya Anda dapat melakukan tombol dengan Colordan Outlinemengatur tetapi meneruskan Blockparameter.

/* 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; }
}

Anda kemudian dapat menggunakan komponen baru itu sebagai

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

Answer 2

Anda dapat menggunakan "Attribute Splatting" untuk ini

misalkan Komponen Dasar Anda ditentukan

<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; }
}

Dan Anda ingin mengisi Param1 terlebih dahulu, jadi Anda membuat MyComponent baru

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

Sekarang, Anda dapat menggunakan MyComponent sebagai pengganti BaseComponent, dan jika Anda tidak memberikan nilai untuk Param1, nilai tersebut akan ditentukan sebelumnya (secara harfiah nilai itu dalam kasus ini)

Jadi markup ini:

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

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

<MyComponent Param2="component"/>

Menghasilkan keluaran ini:

Komponen Dasar

Param1 = basis Param2 = komponen

Komponen Dasar

Param1 = komponen Param2 = saya

Komponen Dasar

Param1 = standar Param2 = komponen

Lihat sampel langsung di BlazorRepl: https://blazorrepl.com/repl/QEvucNFB408fLIXd18