Blazor中的模板化组件

最新推荐文章于 2024-07-19 12:46:35 发布

65号腕

最新推荐文章于 2024-07-19 12:46:35 发布

阅读量1.2k

点赞数

分类专栏： Blazor

本文链接：https://blog.csdn.net/weixin_46295080/article/details/107674742

版权

本文介绍了如何在Blazor中使用模板化组件提高代码复用性和可维护性。通过RenderFragment、RenderFragment<T>以及typeparam，我们可以创建灵活的组件，如Card组件，允许传入Header、Body内容以及泛型列表。同时，详细解析了@context的作用，它是RenderFragment<T>中用于呈现当前项值的关键。

摘要由CSDN通过智能技术生成

实际项目当中经常会有很多重复使用的组件，她们具有相同的布局，只是填充的内容不一样，如果不停的复制粘贴也是件费劲的事情，而且也不好维护和更新，这时候就可以考虑使用模板化组件。

比如以下Bootstrap自带的Card组件：

在这里插入图片描述

红色框的部分就是公共的部分，我们可以把她们封装到模板化组件里。

1. RenderFragment

模板化组件需要用到RenderFragment类型的参数。对于上面的例子，我们可以分成Header和Body两个部分，如下：

<!--Card组件-->
<div class="card" style="width: 18rem;">
    <div class="card-header">
        @Header
    </div>
    <ul class="list-group list-group-flush">
        @Body
    </ul>
</div>

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

    [Parameter]
    public RenderFragment Body { get; set; }
}

调用的时候可以这样写：

<Card>
    <Header>
        Featured
    </Header>
    <Body>
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="li