如何在单个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
相关产品推荐
相关产品推荐

