Blazor

Component Composition & RenderFragment

Penjelasan

RenderFragment adalah tipe khusus Blazor untuk menampung markup yang disisipkan DI ANTARA tag pembuka dan penutup sebuah component — setara props.children di React atau default slot di Vue. Properti bernama ChildContent (konvensi standar) otomatis terisi dari konten di antara tag component.

Contoh Konsep

@* Kartu.razor *@
<div class="kartu-pembungkus">
    @ChildContent
</div>

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

@* Dipakai: *@
@* <Kartu>
    <h2>Judul Kartu</h2>
    <p>Isi kartu bisa apa saja.</p>
</Kartu> *@

Praktikum

Buat component Panel.razor dengan [Parameter] Judul (string) dan RenderFragment? ChildContent, menampilkan Judul di dalam <h3> lalu ChildContent di bawahnya. Pakai component Panel itu dua kali dengan judul dan isi berbeda.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Nama properti ChildContent BERSIFAT KONVENSI, bukan keharusan mutlak — kamu bisa punya beberapa RenderFragment dengan nama berbeda (mis. Header, Footer) untuk named slot ala Vue, tapi ChildContent adalah nama yang otomatis dikenali Blazor untuk konten DEFAULT (tanpa perlu tag khusus di sisi pemakai).

← Kembali List Rendering: @foreach Lanjutkan → EventCallback: Komunikasi Anak ke Induk