Blazor —— 用更能装X的方式编写组件（RenderTreeBuilder）

前言

用 razor 的方式编写组件，这个学习过前端的应该都可以完成，但很多时候，我们需要学习更加高深的技术，不光是可以来装X，更是可以把X升级成高处不胜寒的王者。所以就来教教如何使用纯代码的方式来编写组件。

在装X之前，先了解《探索razor组件背后的秘密，你绝对想象不到》。

装X大法——RenderTreeBuilder

用最常用的例子来说明，编写一个按钮组件。

用 razor 页面来编写组件：

<button class="btn btn-primary" @onclick="OnClick">
	@ChildContent
</button>

@code {
	[Parameter]public RenderFragment ChildContent { get; set; }
	[Parameter]public EventCallback<MouseEventArgs> OnClick { get; set; }
}

现在开始装X大法：

之前说过组件是一个类。

1. 创建组件类

先创建一个类，并继承 ComponentBase 基类，然后声明一些组件需要的参数：

public class MyButton : ComponentBase
{
   
	[Parameter]public RenderFragment ChildContent {
    get; set; }
	[Parameter]public EventCallback<MouseEventArgs> OnClick {
    get; set; }
}

2.