Blazor WASM中能否用C#类实例替代HTML标签？

完全可行，但得借助Blazor的底层渲染机制或者第三方组件库来实现，下面具体说明实现方式和注意事项：

一、手动封装控件类（基于RenderTreeBuilder） #

Blazor的UI本质是通过RenderTreeBuilder构建的，你可以自己封装C#控件类，在类里实现对应的渲染逻辑。

1. 封装Button控件 #

public class MyButton
{
    public string CssClass { get; set; }
    public Action OnClick { get; set; }
    public string Text { get; set; }

    public void Render(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "button");
        builder.AddAttribute(1, "class", CssClass);
        builder.AddAttribute(2, "onclick", EventCallback.Factory.Create(this, OnClick));
        builder.AddContent(3, Text);
        builder.CloseElement();
    }
}

2. 封装容器控件（比如Div） #

public class MyDiv
{
    public string CssClass { get; set; }
    public List<object> Children { get; set; } = new();

    public void Render(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "div");
        builder.AddAttribute(1, "class", CssClass);

        foreach (var child in Children)
        {
            if (child is MyButton btn) btn.Render(builder);
            // 可扩展支持更多自定义控件类型
        }

        builder.CloseElement();
    }
}

3. 在组件中使用 #

@divFragment

<p>当前计数: @count</p>

@code {
    private RenderFragment divFragment;
    private int count;

    protected override void OnInitialized()
    {
        // 创建按钮实例
        var button1 = new MyButton
        {
            CssClass = "btn btn-primary",
            OnClick = IncrementCount,
            Text = "Click me"
        };

        // 创建容器并添加子控件
        var myDiv = new MyDiv { CssClass = "mt-3" };
        myDiv.Children.Add(button1);

        // 生成RenderFragment用于渲染
        divFragment = builder => myDiv.Render(builder);
    }

    private void IncrementCount() => count++;
}

二、借助第三方组件库 #

有些第三方Blazor库已经封装好了这种面向对象的控件API，直接调用即可，不用自己写RenderTreeBuilder的逻辑，能更高效地创建和管理控件实例及子元素。

三、优缺点分析 #

• 优势：适合动态生成UI的场景（比如根据后端数据批量创建控件）；逻辑集中在C#代码中，对习惯后端开发的开发者更友好。
• 劣势：失去了Razor语法直观的UI结构，调试和维护不如直接写Razor方便；手动构建渲染树容易出现序列ID错误，影响UI渲染；Blazor的双向绑定等特性需要额外封装才能支持。

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