如何继承Blazor组件并重写ChildContent实现组件复用？

步骤1：提取共享逻辑到基类 #

把两个组件的公共参数和基础逻辑抽成一个继承ComponentBase的基类，实现参数复用，避免重复定义：

// FormControlBase.cs
public class FormControlBase : ComponentBase
{
    [Parameter] public string WrapperClass { get; set; }
    [Parameter] public string LabelSize { get; set; } = CssHelpers.LabelFormSize();
    [Parameter] public string LabelClass { get; set; }
    [Parameter] public string LabelText { get; set; }
    [Parameter] public string ContentSize { get; set; } = CssHelpers.ColumnSize();
    [Parameter] public string ContentClass { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }

    // 定义虚拟内容区域片段，允许子类重写扩展
    protected virtual RenderFragment ContentArea => ChildContent;
}

步骤2：改造原FormControl组件 #

让FormControl继承基类，UI部分直接复用基类的参数和默认内容区域：

@*FormControl.razor*@
@inherits FormControlBase

<div class=@WrapperClass>
    <label class=@LabelClass>@LabelText</label>

    @ContentArea
</div>

步骤3：实现FormControlValidation组件 #

同样继承基类，重写ContentArea方法，在原有ChildContent前插入验证消息标签：

@*FormControlValidation.razor*@
@inherits FormControlBase

<div class=@WrapperClass>
    <label class=@LabelClass>@LabelText</label>

    @ContentArea
</div>

@code {
    protected override RenderFragment ContentArea => builder =>
    {
        // 渲染验证消息容器
        builder.OpenElement(0, "div");
        builder.AddAttribute(1, "class", "validation-message");
        builder.CloseElement();

        // 渲染传入的ChildContent
        builder.AddContent(2, ChildContent);
    };
}

方案优势 #

• 公共参数集中在基类维护，后续修改只需调整基类，避免重复劳动
• 通过重写虚拟片段实现内容扩展，无需重复编写整个组件的UI结构
• 两个组件保持独立，UI差异仅体现在重写的内容部分

替代方案：组件组合（无需继承） #

如果更倾向于组合模式，可以让FormControlValidation嵌套使用FormControl，将包含验证消息的内容作为子内容传入：

@*FormControlValidation.razor*@
<FormControl WrapperClass="@WrapperClass" LabelSize="@LabelSize" LabelClass="@LabelClass" LabelText="@LabelText" ContentSize="@ContentSize" ContentClass="@ContentClass">
    <div class="validation-message"></div>
    @ChildContent
</FormControl>

@code {
    [Parameter] public string WrapperClass { get; set; }
    [Parameter] public string LabelSize { get; set; } = CssHelpers.LabelFormSize();
    [Parameter] public string LabelClass { get; set; }
    [Parameter] public string LabelText { get; set; }
    [Parameter] public string ContentSize { get; set; } = CssHelpers.ColumnSize();
    [Parameter] public string ContentClass { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
}

不过该方案仍需重复定义参数，不如基类继承的方案简洁。

内容的提问来源于stack exchange，提问作者Bi Nguyễn