ChildContent no Blazor

No Blazor temos uma funcionalidade chamada ChildContent, que nos permite passar por parâmetro à um componente, um conteúdo HTML. Se você não sabe como funciona a passagem de parâmetros no Blazor, dê uma olhada no artigo anterior.

Declarando um ChildContent

Um componente pode receber como parâmetro uma propriedade chamada ChildContent, do tipo RenderFragment. Como o próprio nome do tipo diz, um RenderFragment é um fragmento HTML para renderização.

Sendo assim, se um componente tem um parâmetro do tipo RenderFragment chamado ChildContent, o HTML que for passado nesse parâmetro será renderizado como parte do conteúdo do componente.

Veja na Figura 1, como o ChildContent deve ser declarado num componente.

Figura 1: Exemplo de como declarar um ChildContent

Um componente só pode receber como parâmetro um único ChildContent, é por isso que por convenção, essa propriedade deve ser nomeada exatamente como ChildContent.

Crie esse componente em sua aplicação de exemplo, com o nome de Painel.razor, para que você possa testar o componente com o ChildContent.

Usando um Componente com ChildContent

Para utilizar um componente com um ChildContent, basta passar o fragmento HTML pelo conteúdo do componente, como mostra a Figura 2.

Figura 2: Exemplo de como utilizar o ChildContent

Nesse exemplo estamos usando o componente Painel no Index.razor. Veja que no conteúdo da tag Painel estamos declarando um fragmento HTML.

Esse é o fragmento que será passado como parâmetro para o componente Painel, na propriedade ChildContent, e renderizada como definido na Figura 1.

Execute o seu projeto e veja, como mostra na Figura 3, o componente renderizando o ChildContent dentro de um card do bootstrap.

Figura 3: Exemplo de componente com ChildContent rodando

Como você pode ver, o ChildContent é um recurso bem simples e fácil de usar. E abre um leque de possibilidades na criação de componentes reutilizáveis para a sua aplicação.

Grande Abraço e até o próximo!