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.
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.
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.
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!
Blaze of Code 
2 comentários em “ChildContent no Blazor”