What's the recommended way of rendering a Blazor component dynamically?

Question

I am new to Blazor with basic Angular and Vue.js experience. I would like to render a list of polymorphic components:

<ul>
    @foreach (fruit of fruits) 
         <li>HOW DO I RENDER FRUIT HERE??? </li> // render the fruit component
</ul>

@code {
   // Each member in the list is a subtype of Fruit
   var fruits = List<FruitComponent> {
       new PearComponent(),
       new AppleComponent()'
       new BananaComponent(),
       new RasberryComponent()
}

From what I've gleaned, there's a few ways to achieve this, each with their own disadvantages. An uncommon one suggests using an undocumented API call, which could become deprecated without notice, but it appears to be almost ideal. Another suggests emitting markup in the code which brings back the tedium of writing ASP.NET Server Controls. Finally, the most common suggests using conditional markup, while very simple, it couples the rendering code to the components it is rendering.

Most of the documentation I've read could be stale and no longer pertinent. With the official release of Blazor, what's the recommended way to achieve this?

Answer 1

You have to create a RenderFragment, and use that as a renderer of your polymorphic component... I've used the default Blazor's template Counter component as a parent (CounterParent), and then the CounterChild inherits the CounterParent. I hope it helps!! Regards!

@page "/"

@foreach (CounterParent counter in components)
{
    RenderFragment renderFragment = (builder) => { builder.OpenComponent(0, counter.GetType()); builder.CloseComponent(); };
    <div>
        <div>Before the component</div>
        @renderFragment
        <div>Afterthe component</div>
    </div>
}

@code
{
    List<CounterParent> components = new List<CounterParent>() { new CounterParent(), new CounterChild() };
}

Answer 2

You could use a switch statement that checks the types. You can place components in each of the cases, or render your li however you like.

<ul>
    @foreach (fruit in fruits)
    {
        switch(fruit)
        {
            case PearComponent p:
                <PearComponent ParameterOfSomeSort="p"></PearComponent>
                <li>Or render pears like this, if you want the li in it</li>
                break;
            case AppleComponent a:
                <AppleComponent></AppleComponent>
                break;
            case BananaComponent b:
                <BananaComponent></BananaComponent>
                break;
            case RaspberryComponent r:
                <RaspberryComponent></RaspberryComponent>
                break;
        }
    }
</ul>