Blazor：如何创建可重用的渲染片段？

Question

我经常使用以下标记：

<SfDropDownList DataSource="@Model.Customers" TItem="Customer" TValue="Customer">
    <DropDownListTemplates TItem="Customer">
        <ItemTemplate Context="customer">
            <span>@customer.Name</span><span class="float-right">@customer.Site</span>
        </ItemTemplate>
    </DropDownListTemplates>
</SfDropDownList>

如何在多个组件中重用具有相同参数的 DropDownListTemplates？

我在想，我创建了一个继承自 DropDownListTemplates 的自定义类：

@inherits DropDownListTemplates<Customer>
@code { 
    override void OnAfterRender(bool firstRender)
    {
        // this.ItemTemplate = ??
        base.OnAfterRender(firstRender);
    }
}

但是如何设置基类中的 RenderFragment 参数 ItemTemplate 呢？

我想避免将 SfDropDownList 包装到自定义组件

Answer 1

您可以设置 RenderFragment 参数的默认值，如下所示。

@ChildContent

@code {
    [Parameter] public RenderFragment ChildContent {get; set;} = @<p>Some text here</p>;
}

资料来源：blazor-university.com

编辑添加：您还可以RenderFragment在代码中定义可重用的（.NET Core 3.1 - 5.0）。

public static RenderFragment SayHello = __builder =>
{
    <h1>Hello!</h1>
};

委托RenderFragment还可以接受参数。

<div class="chat">
    @foreach (var message in messages)
    {
        @DisplayChatMessage(message)
    }
</div>

@code {
    RenderFragment<ChatMessage> DisplayChatMessage = message => __builder =>
    {
        <div class="chat-message">
            <span class="author">@message.Author</span>
            <span class="text">@message.Text</span>
        </div>
    };
}

来源：ASP.NET Core Blazor Web Assembly 性能最佳实践

从 .NET 6.0 开始，您将可重用定义RenderFragment为

private RenderFragment RenderWelcomeInfo = @<p>Welcome to your new app!</p>;

参数为

<div class="chat">
    @foreach (var message in messages)
    {
        @ChatMessageDisplay(message)
    }
</div>

@code {
    private RenderFragment<ChatMessage> ChatMessageDisplay = message =>
        @<div class="chat-message">
            <span class="author">@message.Author</span>
            <span class="text">@message.Text</span>
        </div>;
}

来源：ASP.NET Core Blazor Web Assembly 性能最佳实践