A RenderFragment expects only one component to be returned, but that one component may have nested components:
private RenderFragment CreateRenderFragment(){ // This works return @<div><text>Hello</text><text>world!</text></div>; // and so does this // return @<span><text>Hello</text> <text>world!</text></span>;}If we don't want to enclose the components in a <div> or <span> we can create a razor component following the ChildContent convention, e.g. ChildContentComponent:
@ChildContent@code{ [Parameter] public RenderFragment ChildContent { get; set; }}and then use this component as a wrapper:
private RenderFragment CreateRenderFragment(){ return @<ChildContentComponent><text>Hello</text><text>world!</text></ChildContentComponent>;}I may be mising something, but I can't see any other way to create a RenderFragment with multiple components. Neither of the following compile:
private RenderFragment CreateRenderFragment1(){ return @<text>Hello</text> <text>world!</text>;}private RenderFragment CreateRenderFragment2(){ return @:@{<text>Hello</text><text>world!</text> } // ; expected, but will not compile with, either}Is there an easier way than the ChildContentComponent approach, or is there already a standard component which simply declares a public RenderFragment ChildContent { get; set; }?
EDIT:Based on MrC aka Shaun Curtis's answer below, the solution is __builder => { ... };
private RenderFragment CreateRenderFragment3(){ return __builder => {<Widget1>Hello</Widget1><Widget2>world!</Widget2> };}Edit 2:And as Dimitris Maragkos and H H pont out below, <text> is a special do-nothing wrapper which is equivalent:
private RenderFragment CreateRenderFragment3(){<text><Widget1>Hello</Widget1><Widget2>world!</Widget2></text>}