【Blazor】 RenderFragmemtの使い方

簡単な例を用いて説明します。 例えば、下図のような２つのコンポーネントがあったとします。 このコンポーネントが異なっているのは、AとBの部分なので、赤と青の部分は共通化することができます。 AとBの部分は画面によって異なるので、ページ毎に決める必要があります。 ページ毎に異なる部分を変数として扱うことができるのがRenderFragmentです。

早速ですが、RenderFragmentのコンポーネントを使用したコードを作成していきましょう。

@* RenderFragmentを使用したコンポーネント例 *@

<h3>RenderFragmentComponent</h3>

@* 実装先で内容を決める部分 *@
@ChildContent

@code {

    /// <summary>
    /// 実装先で指定するページの固有部分
    /// </summary>
    [Parameter]
    public RenderFragment ChildContent{ get; set; }

}

＠code部分にRenderFragment型でChildContent（名前は何でもOKです）を宣言します。 その際、[Parameter]のアノテーションを忘れないように注意してください。 宣言できたら、実装先で内容を決めたいレイアウト部分に @ChildContentと書きます。これでRenderFragmentを使ったコンポーネントは完成です。

このコンポーネントを使って、試しにページ作成してみます。

@* RenderFragmentを使用したコンポーネントの使用例 *@

@page "/renderfragmenttest"

<Blazor_RenderFragment.Components.RenderFragmentComponent>

    <ChildContent>

        <div>実装先のコンテンツ</div>

    </ChildContent>

</Blazor_RenderFragment.Components.RenderFragmentComponent>

先ほど作成したRenderFragmentComponentという子コンポーネントで全体を囲みます。 さらに、その中にパラメータで指定した変数名と同じタグChildContentで囲みます。 ここにページ固有の実装内容を書いていきます。

これで完成になります。それでは実行してみます。

うまく実装できているのが、確認できました。 RenderFragmentを利用すると、コードの再利用性が上がりますので、是非使ってみてください。