自作Razor ComponentにHTML属性を割り当てたいケースは多々あるかと思います。
例えばid
, class
なんかはその最たるものではないでしょうか。
以下のようなShowMessage.razor
というファイル名の自作Razor Componentがあったとします。
<p>@Message</p> @code { [Parameter] public string Message {get; set;} }
上記Componentを使用する場合、このようなコードとなります。
@page "/" <ShowMessage Message="Hello World!"/>
ここで<ShowMessage />
にstyle
やid
, class
など通常のHTML属性を設定します。
@page "/fetchdata" <ShowMessage Message="Hello World!" style="background-color: red"/>
実行するとエラーが発生しました。
※以下はBlazor WebAssemblyでの実行結果です。
Server side Blazorならビルドの時点で怒られます。
CaptureUnmatchedValuesプロパティと@attributes属性で解決する
こういった場合Parameter
属性に含まれるCaptureUnmatchedValues
プロパティと@attributes
属性を使用することでスマートに解決できるそうです。
以下に例を示します。
実例
自作Razor Componentに手を加えます。
- <p>@Message</p> + <p @attributes="@Attributes">@Message</p> @code { [Parameter] public string Message {get; set;} + [Parameter(CaptureUnmatchedValues = true)] + public Dictionary<string, object> Attributes {get; set;} }
親から受け取ったHTML属性(Attributes
)をまとめて@attributes
に設定しています。簡単ですね。
Attributes
の中身はstyle
がKey background-color: red
がValueとして格納されています。想像通りですね。
親子で同じ属性を指定した場合
親からstyle="..."
を指定され、子自身もstyle="..."
を設定している場合、どのような挙動となるのでしょうか。
本件については、Microsoft Docsに答えが書いてありました。
どうやら子Component内の@attributes
属性と、対象のHTML属性の記述順序によって挙動が変わるとのこと。
これはデザイン崩れなどが発生しそうで注意が必要そうですね。
おわり
前々から困っていた点の解決策が見つかって幸せです