深入浅出Blazor webassembly之理解ChildContent RenderFragment

最新推荐文章于 2023-06-16 09:16:59 发布

zhugejianzhan

最新推荐文章于 2023-06-16 09:16:59 发布

阅读量464

点赞数

本文链接：https://blog.csdn.net/csdnharrychinese/article/details/120735934

版权

本文详细介绍了Blazor中RenderFragment的概念和作用，它允许组件对外暴露内部HTML样式的控制。通过示例展示了如何使用带有RenderFragment参数的组件，包括ChildContent的使用规则以及如何处理多个RenderFragment参数。通过这些，开发者可以更灵活地创建模版型组件，如ModalDialog，并实现头部、内容和底部的自定义显示。

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

===========================================

参考

===========================================

https://blazor-university.com/templating-components-with-renderfragements/

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components

===========================================

背景

===========================================

普通组件的使用示例, 注意仅仅包含组件的IncrementAmount 参数, 不能包含子html内容或子tag.

<Counter IncrementAmount="5"/>

Counter组件的定义代码:

@page "/counter" 

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {

    [Parameter] public int IncrementAmount{ get; set; } = 1;

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount= currentCount+ IncrementAmount;
    }
}

这样的简单组件, 在被使用时不允许添加inner html内容, 组件的html都由组件自身确定, 外界仅仅能输入一些参数.

如果在使用这样的组件时, 硬要加inner html, 运行时会报错.

@page "/simplepage"
<Counter IncrementAmount="5">something</Counter>

===========================================

带 RenderFragment 的组件

===========================================

如果我们要让 Counter 组件要对外开放html样式控制, 比如 IncrementAmount <10, 用 h1 样式; IncrementAmount <20 用h2 样式; IncrementAmount <30 用h3 样式; 上面实现方式的组件做起来就很不灵活了, 就非常不便.

Blazor提供一个好的解决方式是, 即带有 RenderFragment 的组件. 需要说明的是, RenderFragment 类型实际上是一个delegate 代理, 以后再细讲这个.

关于组件增加 RenderFragment 参数的规则是:

(1)如果组件带有inner html 就必须为组件增加 RenderFragment 参数.
(2)如果使用组件时, inner html 是直接放到组件tag之下, 则组件一定要有 ChildContent RenderFragment 参数, 否则运行报错.
(3)如果使用组件时, inner html是放到某个自定义tag下, 则组件必须定义一个和tag同名的RenderFragment 参数或 ChildContent RenderFragment 参数. Blazor 优先为同名的RenderFragment 参数赋值, 如果没有的话, 会试图为ChildContent参数赋值, 如果ChildContent参数也不存在的话, 就会运行报错.
(4)组件定义中多RenderFragment 参数, 运行不会有问题, 但如果少定义了 RenderFragment 参数,运行就会报错
(5)为了防止使用方多传子tag, 所有自定义的组件最好都声明一个 ChildContent RenderFragment 参数

规则(2)的示例说明:

@page "/simplepage"
<Counter IncrementAmount="5">
    <h1>something</h1>
</Counter>

<Counter IncrementAmount="5">something</Counter>

@page "/counter" 
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@ChildContent 
@code {

    [Parameter] public int IncrementAmount{ get; set; } = 1;
    [Parameter] public RenderFragment ChildContent { get; set; } //必需名为ChildContent 

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount= currentCount+ IncrementAmount;
    }
}

规则(3)的示例说明:

@page "/simplepage"
<Counter IncrementAmount="5">
    <ChildContent2>something</ChildContent2>
</Counter>

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<br />
ChildContent: @ChildContent
<br />
ChildContent2: @ChildContent2
@code {

    [Parameter] public int IncrementAmount { get; set; } = 1;
    [Parameter] public RenderFragment ChildContent { get; set; }  //增加ChildContent参数, 保险起见
    [Parameter] public RenderFragment ChildContent2 { get; set; } //优先被赋值

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount = currentCount + IncrementAmount;
    }
}

运行效果:

===========================================

带多个 RenderFragment 参数组件的示例

===========================================

RenderFragment 参数非常适合模版型组件开发, 比如我们要设计一个 Modal Dialog 组件, 该组件大块显示内容都由外界传入, 比如Header/Content/Footer, 另外为了增加通用性, 样式控制最好开放使用方.

@page "/simplepage"

<MyModal>
    <Header>this is title</Header>
    <Content>This is content</Content>
    <Footer>
        <button type="button" class="btn btn-primary"> Close Dialog </button>
    </Footer>
</MyModal>

@Header 
<br />
@Content 
<br />
@Footer   

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

效果: