【Blazor】 @refを使い方

@refとはBlazorコンポーネントの参照するためのディレクティブのことです。 これを使用することで、親コンポーネントから子コンポーネントのメソッドを呼び出したり、プロパティを変更することができるようになります。

まず、参照するための子コンポーネントを作成していきます。 親コンポーネントからUpdateMessageメソッドが呼ばれると、UIのテキストが引数の値に変更される仕組みになっています。

<h3>@Message</h3>

@code {
    public string Message { get; set; } = "初期メッセージ";

    public void UpdateMessage(string newMessage)
    {
        Message = newMessage;

        // 状態変更後、コンポーネントの再レンダリングをトリガーします
        StateHasChanged();
    }
}

前セクションで作成したコンポーネント(ChildComponent)を使って、コンポーネントを参照します。 以下コード例になります。

@page "/parent"
@using Blazor_Ref.Components;

<ChildComponent @ref="childRef" />

<button @onclick="UpdateChildMessage">子コンポーネントのメッセージを更新</button>

@code {
    private ChildComponent? childRef;

    private void UpdateChildMessage()
    {
        childRef?.UpdateMessage("ボタンによるメッセージ更新");
    }
}

親コンポーネント内で子コンポーネントであるChildComponentを@refを用いて参照します。 @refには、コンポーネントの変数であるchildRefを指定します。そうすることで、値が共有されます。 ボタンを押したタイミングで、参照した子コンポーネントからUpdateMessageメソッドを呼び出しています。 ボタンをクリックし、メッセージが初期メッセージからボタンによるメッセージ更新へ変更されることを確認してください。

様々な場面で活用することができますが、次の場面がよく使われそうな気がします。

• フォームのバリデーション
• モーダルダイアログ

@refで参照したコンポーネントがレンダリングが完了してから、使用するようにしてください。 注意が必要なのは、以下のようなコードです。

@page "/parent"
@using Blazor_Ref.Components;

<ChildComponent @ref="childRef" />

@code {
    private ChildComponent? childRef;

    protected override void OnInitialized()
    {
        // 初期化時 childRef はまだ null になっている
        childRef.UpdateMessage("新しいメッセージ");
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            // OnAfterRenderはレンダリング後の処理なので childRef は null ではありません。
            childRef?.UpdateMessage("レンダリング後の更新メッセージ");
        }
    }
}

OnInitializedメソッドなどの初期化処理などで、レンダリングされていない状態だとnull参照になります。 それに比べて、OnAfterRenderはレンダリング後に行う処理のため、null参照にはなりません。 もし参照したコンポーネントで初期化等が必要な場合は、OnAfterRenderで行うようにします。

@refは便利ですが、使用は最低限に抑え、ロジックはなるべくコンポーネント内で完結するように心がけると、 バグの少ないアプリケーションになると思います。