子コンテンツ ― ChildContent と RenderFragment

導入

「枠（カードや吹き出し）だけを部品にして、中身は使う側が自由に入れたい」。そんなときに使うのが子コンテンツ（ChildContent）です。HTMLの<div>の中に好きな要素を書けるのと同じ感覚を、自作コンポーネントで実現します。

説明

RenderFragment型のChildContentパラメータを用意し、@ChildContentで描くと、タグの中身がそこに入ります。

@* --- Panel.razor（枠だけの部品） --- *@
<div class="panel">
    <div class="panel-body">
        @ChildContent
    </div>
</div>

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

@* --- 使う側：タグの中身がそのまま差し込まれる --- *@
<Panel>
    <h4>好きな見出し</h4>
    <p>好きな段落。ボタンでも表でも何でも入る。</p>
</Panel>

RenderFragment ChildContentを公開し、@ChildContentで好きな位置に描く
使う側は<Panel> ...中身... </Panel>と、開始・終了タグの間に自由に書ける
名前付きで複数の差し込み口を作りたいときはRenderFragmentのパラメータを複数用意する（テンプレート化）

まとめ

中身を差し込めるようにするのがChildContent（型はRenderFragment）
枠を部品化し、中身は使う側に任せられる
複数の差し込み口や、データを受け取るテンプレート（RenderFragment<T>）にも発展できる

次回: 階層を飛び越えて値を配るCascadingValueです。