Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

What is the easiest way to return multiple components in one RenderFragment?

$
0
0

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>}

Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>