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

Question

question from:https://stackoverflow.com/questions/65920329/how-to-render-multiple-child-components-in-parent-component-without-calling-chi

Answer 1

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.