Blazor中无根容器的RenderFragment字面量语法实现方法

在Blazor中，确实没有像React那样直接使用<>的短语法创建无根片段，但有几种等价的实现方式，能达到复用无根HTML内容的效果：

方法1：使用<text>虚拟容器 #

<text>是Blazor的内置虚拟元素，它不会被渲染成实际DOM节点，仅作为逻辑容器包裹多个元素。你可以直接用它定义无根的RenderFragment字面量：

@* 在组件中调用片段 *@
@fragmentContent

@code {
    private RenderFragment fragmentContent = @<text>
                                              <div>1</div>
                                              <div>2</div>
                                              <div>3</div>
                                           </text>;
}

渲染后只会输出三个<div>元素，不会额外添加任何根容器。

方法2：手动构建RenderTree（适合复杂动态场景） #

如果需要更精细的控制，可以直接通过RenderTreeBuilder手动构建内容，这种方式不需要任何虚拟容器：

@* 在组件中调用片段 *@
@manualFragment

@code {
    private RenderFragment manualFragment = builder =>
    {
        // 渲染第一个div
        builder.OpenElement(0, "div");
        builder.AddContent(1, "1");
        builder.CloseElement();

        // 渲染第二个div
        builder.OpenElement(2, "div");
        builder.AddContent(3, "2");
        builder.CloseElement();

        // 渲染第三个div
        builder.OpenElement(4, "div");
        builder.AddContent(5, "3");
        builder.CloseElement();
    };
}

这种写法虽然繁琐，但适合动态生成内容的场景，比如循环渲染不确定数量的元素。

方法3：带参数的无根片段 #

如果需要复用带参数的无根内容，同样可以结合<text>和方法形式的RenderFragment：

@* 调用带参数的片段 *@
@GetItemFragments("Item A", "Item B", "Item C")

@code {
    private RenderFragment GetItemFragments(params string[] items) => @<text>
                                                                       @foreach (var item in items)
                                                                       {
                                                                           <div>@item</div>
                                                                       }
                                                                    </text>;
}

内容的提问来源于stack exchange，提问作者Peluko