Blazor中提取重复标记代码：void函数写法是否合规？

首先明确：void类型的模板方法（直接操作RenderTreeBuilder的void方法）是有效的代码复用方式，但并非Blazor官方推荐的首选方案，以下是具体分析：

为什么void方法能工作？ #

Blazor的组件渲染本质是通过RenderTreeBuilder构建渲染树，你定义的void方法本质是直接调用该构建器的API（如builder.OpenElement、builder.AddContent等）来生成标记，这种写法完全符合Blazor的渲染逻辑，因此能实现代码复用。

void方法的优缺点 #

优点 #

• 无需额外创建组件文件，对于简单的复用场景，实现成本较低；
• 能灵活控制动态渲染逻辑，适合需要通过代码精细控制HTML结构的场景。

缺点 #

• 可读性与维护性差：手写RenderTreeBuilder的API远不如直接写Razor标记直观，复杂的HTML结构很容易出现层级错误、属性遗漏，后续维护难度大；
• 缺乏组件化优势：无法享受强类型参数校验、独立单元测试、组件生命周期钩子等组件化特性；
• 异步支持受限：你之前尝试的async Task写法无效，是因为Blazor的同步渲染上下文不支持直接调用异步模板方法，异步逻辑需要特殊处理（如封装为异步组件），而void方法本身是同步的，仅能处理同步渲染场景。

更推荐的替代方案 #

1. 独立Razor组件（官方首选） #

将重复的标记与逻辑封装为独立的.razor组件，通过参数接收需要比较的数值，内部用Razor语法实现展示逻辑。示例：

@* EqualValueDisplay.razor *@
@if (Value1.Equals(Value2))
{
    <span class="text-success font-bold">@Value1</span>
}
else
{
    <span class="text-danger">@Value1 (≠ @Value2)</span>
}

@code {
    [Parameter, Required] public object Value1 { get; set; }
    [Parameter, Required] public object Value2 { get; set; }
}

使用时直接在父组件中引用：

<EqualValueDisplay Value1="Order.Total" Value2="Order.ExpectedTotal" />

这种方式可读性强、类型安全，便于维护和测试，是Blazor官方最推荐的复用方式。

2. 返回RenderFragment的方法 #

如果不想创建单独组件，可以定义返回RenderFragment的方法，在方法内直接使用Razor语法编写标记，比void方法更直观：

@code {
    private RenderFragment DisplayEqualValues(object value1, object value2) => __builder =>
    {
        if (value1.Equals(value2))
        {
            <span class="text-success font-bold">@value1</span>
        }
        else
        {
            <span class="text-danger">@value1 (≠ @value2)</span>
        }
    };
}

调用时直接在Razor中使用：

@DisplayEqualValues(Order.Total, Order.ExpectedTotal)

总结 #

void类型的模板方法是有效的，但仅适合特殊场景。日常开发中，优先选择独立Razor组件，其次考虑返回RenderFragment的方法，这两种方式更符合Blazor的组件化设计理念，也更易于维护。

内容的提问来源于stack exchange，提问作者dharmatech