前提・実現したいこと
Razorの独自基底コンポーネントを継承したコンポーネントをレンダリングしたい。
前提として、RazoeBaseLibがあり
RazoeBaseLibはRazorコンポーネントのクラスライブラリで、
次に示す、ツリー構造のようなコンポーネント群からなります。
RazorMainViewBase └RazorSceneObjectBase ├RazorViewObjectBase ├RazorViewObjectBase … └RazorViewObjectBase RazorMainViewBaseは1つのRazorSceneObjectBaseをプロパティとして公開しており、 RazorSceneObjectBaseは複数のRazorViewObjectBaseをDictionaryとしてもっています。
RazorMainViewBase
1@Layout LayoutBaseComponent 2 3@if(CurrentScene != null) 4{ 5 <RazorSceneObjectBase @ref="CurrentScene"/> 6} 7 8@code { 9 [Parameter] 10 public RazorSceneObjectBase CurrentScene {get;set;} 11}
RazorSceneObjectBase
1@inherits RazorViewObjectBase 2@foreach(var key in Props.Keys) 3{ 4 <div style="@Style"> 5 <RazorViewObjectBase @ref="Props[key]"/> 6 </div> 7} 8 9@code { 10 public Dictionary<string, RazorViewObjectBase> Props {get; internal set;} = new(); 11 12 protected void AddProp(string key, RazorViewObjectBase o){ 13 Props[key] = o; 14 } 15}
RazorImageObjectBase
1@inherits RazorViewObjectBase 2 3<img src="@ImageUri"/> 4 5@code { 6 public string ImageUri {get;set;} 7}
RazorViewObjectBase
1@inherits LayoutBaseComponent 2@Body 3 4@code { 5 public string Style {get;set;} = ""; 6}
発生している問題・エラーメッセージ
次のように派生コンポーネントを作成したときに、実際のインスタンスではなく基底のコンポーネントが表示されます。
該当のソースコード
WelcomeView
1public class WelcomeView : RazorMainViewBase { 2 protected override void OnParametersSet() 3 { 4 base.OnParametersSet(); 5 CurrentScene = new WelcomeScene(); 6 } 7
WelcomeScene
1public class WelcomeScene : RazorSceneObjectBase { 2 protected override void OnParametersSet() 3 { 4 base.OnParametersSet(); 5 Style = "background-color : red;"; 6 var newImageItem = new WelcomeItem(); 7 newImageItem.ImageUri = ".Assets/hoge.png"; 8 AddProp(newImageItem); 9 } 10} 11
WelcomeItem
1public class WelcomeItem : RazorImageObjectBase { 2 3}
試したこと
上記状態から、
<WelcomeView />
を呼び出したとき、
WelcomeViewのCurrentSceneのインスタンスはViewSceneではなくRazorSceneObjectBaseとなっており、Styleも適用されず <div style></div> となります。
派生したコンポーネントを、基底クラスのレンダリングから呼び出すことはできますでしょうか?
補足情報(FW/ツールのバージョンなど)
.net3.1
Blazor(web assembly application)
あなたの回答
tips
プレビュー