扩展@sw1337的回答,如果派生组件没有markdown,您可以将其创建为常规cs文件而不是razor文件,它将按预期工作,无需调用基本BuildRenderTree方法。有关详细信息,请参见这里。
简单例子
基础组件(MyAbstractComponent.razor)
<h1>@header</h1>
@code {
protected string header;
}
派生组件
public class MyDerivedComponent : MyAbstractComponent
{
protected override void OnInitialized()
{
header = "set header from derived component";
}
}
参数示例
基础组件 (MyAbstractComponent.razor)
<h1>@Header</h1>
@code {
[Parameter] public string Header { get; set; }
}
派生组件
public class MyDerivedComponent : MyAbstractComponent
{
protected override void OnParametersSet()
{
Header ??= "Default Header from derived Component"
}
}
用法1 - 派生组件的默认标题
一些 Razor 文件
<MyDerivedComponent></MyDerivedComponent>
结果
<h1>Default Header from derived Component</h1>
使用方法2 - 指定派生消费者的标题
某些 Razor 文件
<MyDerivedComponent Header="MyHeader"></MyDerivedComponent>
结果
<h1>MyHeader</h1>
RenderFragment 参数示例
Blazor Fiddle
MyBaseComponent.razor
<h3>@Header</h3>
@if (ChildContent is not null)
{
@ChildContent
}
@code {
[Parameter] public string Header { get; set; }
[Parameter] public RenderFragment ChildContent { get; set; }
}
MyDerivedComponent.cs
public class MyDerivedComponent : MyBaseComponent
{
protected override void OnParametersSet()
{
Header ??= "Derived Component Header";
ChildContent ??= CreateDefaultChildContent();
}
private static RenderFragment CreateDefaultChildContent()
{
return builder =>
{
builder.OpenElement(0, "h4");
builder.AddContent(1, "Derived Component default child content value");
builder.CloseElement();
};
}
}
使用 MyRazorPage.razor
示例一
消费者未传递参数。从派生组件默认值中使用Header
和ChildContent
。
code
<MyDerivedComponent/>
输出
<h3>Derived Component Header</h3>
<h4>Derived Component default child content value</h4>
示例二 用户传递了Header
参数,派生组件的默认ChildContent
将被使用。
代码
<MyDerivedComponent Header="Consumer Header"/>
输出
<h3>Consumer Header</h3>
<h4>Derived Component default child content value</h4>
第三个例子
用户传递了Header
和ChildContent
两个参数。
代码
<MyDerivedComponent Header="Consumer Header">
<h4>Child Content - from consumer</h4>
</MyDerivedComponent>
输出
<h3>Consumer Header</h3>
<h4>Child Content - from consumer</h4>