Blazor學習記錄六_模版化組件_渲染模式_CSS隔離和代碼隔離

17.模版化組件

在組件中放置一個可渲染的代碼片段供外部調用者來傳入要渲染的內容及渲染樣式，這樣的組件就叫做模版化的組件。一般是一個支持泛型的組件，目標爲消費者封裝重複使用的通用性良好的UI組件。比如一個用來給用戶呈現表格數據的表格組件。

示例組件 GenaricTable.razor 代碼如下：

@typeparam TData

@if(Data is not null)
{
    <table class="table">
        <thead>
            <tr>
                @HeaderTemplate
            </tr>
        </thead>
        <tbody>
            @foreach(var item in Data)
            {
                <tr>
                    @RowTemplate?.Invoke(item);
                </tr>
            }
        <tbody>
    </table>
}

@code
{
    [parameter]public IEnumerable<TData>?  Data{get;set;}
    [parameter]public RenderFragment<TData>? RowTemplate{get;set;}
    [parameter]public RenderFragment? HeaderTemplate{get;set;}
}

消費者代碼如下：

@Page "/genaric-table"

<GenaricTable Data="Users">
    <RowTemplate>
        <td>@context.Id</td>
        <td>@context.Name</td>
    </RowTemplate>
</GenaricTalbe>

@{
    class user
    {
        public int Id{get;set;}
        public string? Name{get;set;}
    }
    IEnumerable<User> Users => new List<User>
    {
        new(){Id=1,Name="張三"},
        new(){Id=2,Name="李四"}
    }
}

• 說明：
  RenderFragment 或 RenderFragment 可渲染片段，實際就是委託
  如果是泛型可渲染片段如 RenderFragment<TData>? RowTemplate{get;set;} 則在調用時，Blazor會爲調用者使用的地方自動引入一個叫 @context 的數據上下文變量，它即是該泛型委託的封閉類型的一個約定實例。