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 的数据上下文变量，它即是该泛型委托的封闭类型的一个约定实例。