What is RenderFragment?

• RenderFragment - Represents a segment of UI content, implemented as a delegate that writes the content to a RenderTreeBuilder
• The ParentComponent can provide content for rendering inside ChildComponent by placing the content inside the <ChildComponent>...</ChildComponent> tags
  • The property in ChildComponent that receiving the the content from ParentComponent must be named ChildContent by convention
  • ChildContent property must be of type RenderFragment
• Links:
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/components/#child-content
  • https://docs.microsoft.com/en-us/aspnet/core/blazor/components/templated-components
  • https://blazor-university.com/templating-components-with-renderfragements/
  • https://docs.microsoft.com/en-us/archive/msdn-magazine/2019/march/cutting-edge-hierarchical-blazor-components

Basic example

Main.razor

<h1>Title: Main Component</h1>

<h3>Child component is rendered below</h3>

<FooComponent>
	<strong>This text is passsed from Main Component to FooComponent</strong>
</FooComponent>


@code {
    // ... ... ...
}

FooComponent.razor

<h1>Title: Foo Component</h1>

@ChildContent

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

The <strong>This text is passsed ...</strong> will be set to FooComponent.ChildContent