How to render multiple child components in parent component without calling @ChildContent in Blazor

Component Instances

Components are classes, and you need an instance of a Component class to be created before you can access its members - such as its ChildContent.

The Component instance is created by Blazor when it is first rendered.

In order to render the Child Component(s), they need to be part of a RenderTree batch.

If the Component (Parent) that "owns" the RenderFragment (Parent.ChildContent) containing the Child Component does not itself render that ChildContent, then the Child Component(s) instance will not get created.

A line of code like this is accessing an instance Property of the Child Component, and this requires the Child Component instance to exist prior to being called.

@lChild.ChildContent(lData); // We render the child here

So, in short, you need to render ChildContent in your Parent Component to create the instances of the Child Components and register them in the RenderTree.

Slight Variation

If your Child Component really has no internal logic - as in the example in your question - then it does not need to be a Component at all - it can be a RenderFragment, which then makes your requirement to wrap each child in extra markup much easier, as a RenderFragment does not get instantiated like a Component.

Multi-child RenderFragments

If you write your Parent to accept multiple child RenderFragments, like this:

@typeparam TData

<div class="parent-component">
  @foreach (var lData in DataSource)
    {
        @foreach (var lChild in m_Children)
        {
            <div class="child-component">
                @lChild(lData);
            </div>
        }
    }

</div>

@code {
    [Parameter]
    public List<TData> DataSource { get; set; }

    [Parameter]
    public RenderFragment<TData> ChildFragment { set => m_Children.Add(value); }

    /// Collection of all added child fragments
    private List<RenderFragment<TData>> m_Children = new List<RenderFragment<TData>>();
}

You can use it like this:

<ParentComponent DataSource="@AccountList">
    <ChildFragment><span>@context.FirstName</span></ChildFragment>
    <ChildFragment><i>@context.LastName</i></ChildFragment>
    <ChildFragment><b>@context.Age</b></ChildFragment>
</ParentComponent>

As an added bonus, you no longer need to specify the type for TData as it can be inferred.

** Note: This technique will only work for RenderFragments, but you can, of course put any content you like inside the ChildFragment(s), including Child Components and still have control over the output rendering.

I found also an solution by my self by wrapping multiple ChildComponent into an own RenderFragment, named <MultiComponents> in my code:

Test.razor:

<ParentComponent DataSource="@AccountList">
    <MultiComponents> // <-- Custom RenderFragment
        <ChildComponent TData="Account"><span>@context.FirstName</span></ChildComponent>
        <ChildComponent TData="Account"><i>@context.LastName</i></ChildComponent>
        <ChildComponent TData="Account"><b>@context.Age</b></ChildComponent>
    <MultiComponents> 
</ParentComponent>

@code {

    // The datasource:
    private List<Account> AccountList = new List<Account>() {
        new Account() { FirstName = "Sam", LastName = "Soldier", Age = 33},
        new Account() { FirstName = "Lisa", LastName = "Johnson", Age = 25},
        new Account() { FirstName = "Jonas", LastName = "Peer", Age = 50 }
    };

    // A Simple Account-Class for the datasource
    class Account
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public int Age { get; set; }
    }
}

ParentComponent.razor:

In my parent component I can replace the call @ChildComponent by @MultiComponents now:

<CascadingValue Value="this" Name="ParentComponent">
    @MultiComponents // <-- Call MultiComponents instead @ChildComponents
    <div class="parent-component">
        @foreach (var lData in DataSource)
        {
            @foreach (var lChild in m_Children)
            {
                <div class="child-component">
                    @lChild.ChildContent(lData);
                </div>
            }
        }

    </div>
</CascadingValue>

@code {

    [Parameter]
    public List<TData> DataSource { get; set; }

    [Parameter]
    public RenderFragment ChildContent { get; set; }
    
    [Parameter] 
    public RenderFragment MultiComponents { get; set; } 

    /// Collection of all added child components
    private List<ChildComponent<TData>> m_Children = new List<ChildComponent<TData>>();

    /// Add a child component (will be done by the child itself)
    public void AddChildComponent(ChildComponent<TData> pChildComponent)
    {
        m_Children.Add(pChildComponent);
        StateHasChanged();
    }
}

This has the advanatage, that I can use optionally the @ChildComponent und further custom RenderFragments inside the <ParentComponent>:

[...]
<CascadingValue Value="this" Name="ParentComponent">
    @ChildComponent
    @MultiComponents
    // Further Render Fragments

    <div class="parent-component">
    [...]