You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在单个RenderFragment中返回多个组件?最简实现方案

Blazor中RenderFragment多组件渲染的简便实现方式

RenderFragment要求返回单个根组件,不过这个根组件可以包含任意嵌套内容,示例代码如下:

private RenderFragment CreateRenderFragment()
{
    // 这种写法可行
    return
    @<div>
        <text>Hello</text>
        <text>world!</text>
    </div>;

    // 下面这种写法也可行
    // return @<span><text>Hello</text> <text>world!</text></span>;
}

如果不想用<div>或<span>这类HTML元素包裹内容,可以遵循ChildContent约定自定义一个Razor组件(比如ChildContentComponent):

@ChildContent

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

之后就可以用这个组件作为无意义的包装器来使用:

private RenderFragment CreateRenderFragment()
{
    return
    @<ChildContentComponent>
        <text>Hello</text>
        <text>world!</text>
    </ChildContentComponent>;
}

我尝试过以下两种写法,但都无法通过编译:

private RenderFragment CreateRenderFragment1()
{
    return @<text>Hello</text> <text>world!</text>;
}

private RenderFragment CreateRenderFragment2()
{
    return
    @:@{ 
        <text>Hello</text>
        <text>world!</text>
    } // 提示需要分号,但加了分号也无法编译
}

请问有没有比自定义ChildContentComponent更简便的实现方式?或者官方已经提供了仅声明public RenderFragment ChildContent { get; set; }的标准组件?


编辑补充1:使用__builder委托写法

根据MrC(Shaun Curtis)的方案,可以直接通过__builder => { ... }的方式实现,无需额外组件:

private RenderFragment CreateRenderFragment3()
{
    return __builder =>
    {
        <Widget1>Hello</Widget1>
        <Widget2>world!</Widget2>
    };
}

编辑补充2:利用<text>无操作包装器

正如Dimitris Maragkos和H H指出的,<text>是Blazor内置的无操作包装器,也能实现等效效果:

private RenderFragment CreateRenderFragment3()
{
    return @<text>
        <Widget1>Hello</Widget1>
        <Widget2>world!</Widget2>
    </text>;
}

内容的提问来源于stack exchange,提问作者Michael Csikos

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.27 08:54:57