blazor c#怎樣創建組件

在Blazor中，創建組件涉及以下步驟：

1. 創建一個新的類，該類繼承自ComponentBase。例如，創建一個名為MyComponent的組件：

using Microsoft.AspNetCore.Components;

public class MyComponent : ComponentBase
{
    // 組件代碼
}

2. 在組件類中定義組件的屬性、方法和事件。例如，添加一個名為Title的屬性：

using Microsoft.AspNetCore.Components;

public class MyComponent : ComponentBase
{
    public string Title { get; set; }

    // 組件代碼
}

3. 在組件類中重寫OnInitialized、OnParametersSet和OnRenderAsync方法，以便在組件的生命周期中執行特定操作。例如，在OnInitialized方法中設置組件的狀態：

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

public class MyComponent : ComponentBase
{
    public string Title { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        // 設置組件狀態
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        // 在參數設置后執行操作
    }

    protected override async Task OnRenderAsync(RenderTreeBuilder builder)
    {
        base.OnRenderAsync(builder);
        // 在渲染過程中執行操作
    }
}

4. 在組件類中定義BuildRenderTree方法，以便在渲染過程中構建組件的HTML結構。例如，添加一個標題元素：

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;

public class MyComponent : ComponentBase
{
    public string Title { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        // 設置組件狀態
    }

    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        // 在參數設置后執行操作
    }

    protected override async Task OnRenderAsync(RenderTreeBuilder builder)
    {
        base.OnRenderAsync(builder);
        builder.AddContent(0, $"<h1>{Title}</h1>");
    }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        base.BuildRenderTree(builder);
        builder.AddContent(0, $"<h1>{Title}</h1>");
    }
}

5. 在需要使用組件的頁面或布局中添加<MyComponent>標簽，并設置所需的屬性。例如：

@page "/mycomponent"

@if (title != null)
{
    <MyComponent Title="@title" />
}
else
{
    <p>Loading...</p>
}

<script>
    const title = "Hello, Blazor!";
</script>

這樣，就創建了一個名為MyComponent的Blazor組件。你可以根據需要修改組件的代碼，以滿足你的需求。