現在MyButtonには3つの[Parameter]があります。さらに追加する場合、また新しい[Parameter]を定義する必要があります。このコンポーネントを更新し続けるのを避けるため、Blazorが提供する@attributeを使いましょう。
まず、元の<button>を<input>に変更し、MyButton.razorで[Parameter]を持つInputAttributesを定義します。型はDictionary<string, object>で、初期値を設定しておきます。外部からこのパラメータが渡されなければ、初期値が適用されます。
次に、PostBase.razor.csにも同名の変数を定義しますが、valueとclassを少し変更します。
最後に、Post.razorで呼び出すMyButtonにはInputAttributesだけを渡せば完了です。
しかし、どこかおかしい感じがします。というのも、変数InputAttributesを1つだけ使ったため、ResetボタンとSubmitボタンが同じになってしまいました。もしReset用の変数を別に定義すると、また元と同じ手間がかかります。
そこで、[Parameter]のパラメータCaptureUnmatchedValuesを活用します。元の[Parameter]を[Parameter(CaptureUnmatchedValues = true)]または[Parameter(true)]に変更し、Blazorにこの変数がInputAttributesで定義されていない値もキャプチャすることを伝えます。
次に、PostBase.razor.csの変数InputAttributesを削除します。このような定義はできなくなるからです。もし残した場合どうなるか、後で確認してみましょう。
最後に、PostBase.razorで<MyButton>に好きなHTML属性を自由に与えると、SubmitボタンとResetボタンに戻ります。注意点として、自由に定義できるようになったため、強い型付けの制約はなくなります。
ここで、二つの<MyButton>に同じHTML属性typeがあることに気づくかもしれません。重複しているので、PostBase.razor.csのInputAttributesで定義できるでしょうか？
残念ながらエラーメッセージによると、CaptureUnmatchedValuesを使うとInputAttributesを明示的に定義できません。そのため、利用者はこの点に特に注意する必要があります。
もう一つ、HTML属性の読み取り順は右から左です。重複したHTML属性がある場合、右側のものが左側を上書きします。MyButton.razorの@attributeの右側にvalue="MyButton"を追加すると、Webページを開いたときに両方のボタンが"Mybutton"になります。したがって、初期値を設定する場合は、@attributeの左側に配置して、渡された値を上書きしないようにするのがよいでしょう。
参照：
注：本記事のコードは .NET 6 + Visual Studio 2022 でリファクタリングされています。原文リンクからリファクタリング後のコードと比較しながら学習できます。ご一読いただき、原作者をサポートしていただきありがとうございます。