南油网站建设,公众号打开wordpress,做网站制作一般多少钱,站长工具传媒使用 RenderTreeBuilder 创建组件是 Blazor 的一种高级方案。前几篇文中有这样创建组件的示例 builder.ComponentMyComponent().Build(); #xff0c;本文主要介绍该高级方案的具体实现#xff0c;我们采用测试驱动开发#xff08;TDD#xff09;方法#xff0c;大…使用 RenderTreeBuilder 创建组件是 Blazor 的一种高级方案。前几篇文中有这样创建组件的示例 builder.ComponentMyComponent().Build(); 本文主要介绍该高级方案的具体实现我们采用测试驱动开发TDD方法大致思路如下
从测试示例入手扩展一个RenderTreeBuilder类的泛型扩展方法泛型类型为组件类型创建组件建造者类ComponentBuilder提供方法来构建组件通过组件的属性选择器来设置组件参数构建时能返回组件的对象实例
1. 示例
首页我们从一个我们预想的高级方案示例入手然后逐渐分析并实现我们预想的方案。下面是预想的示例代码
class MyComponent : ComponentBase
{private MyTest test; //MyTest组件的对象实例//覆写构建呈现树方法protected override void BuildRenderTree(RenderTreeBuilder builder){builder.ComponentMyTest().Set(c c.Title, Hello) //设置MyTest组件Title参数.Build(value test value); //建造组件并给MyTest实例赋值}
}2. 扩展方法
下面实现builder.ComponentMyTest()这行代码这是RenderTreeBuilder的一个扩展方法该方法返回组件建造者类ComponentBuilder。
public static class Extension
{//泛型T是Blazor组件类型public static ComponentBuilderT ComponentT(this RenderTreeBuilder builder) where T : notnull, IComponent{//返回一个组件建造者类对象将builder传递给建造者//其内部方法需要通过builder来构建组件return new ComponentBuilderT(builder);}
}3. 建造者类
接下来实现组件建造者类ComponentBuilder该类是手动构建组件的核心代码提供设置组件参数以及构建方法。
public class ComponentBuilderT where T : IComponent
{//手动构建呈现器private readonly RenderTreeBuilder builder;//组件参数字典设置组件参数时先存入字典在构建时批量添加internal readonly Dictionarystring, object Parameters new(StringComparer.Ordinal);//构造函数internal ComponentBuilder(RenderTreeBuilder builder){this.builder builder;}//添加组件参数方法name为组件参数名称value为组件参数值//提供Add方法可以添加非组件定义的属性例如html属性public ComponentBuilderT Add(string name, object value){Parameters[name] value; //将参数存入字典return this; //返回this对象可以流式操作}//设置组件参数方法selector为组件参数属性选择器表达式value为组件参数值//使用选择器有如下优点// - 当组件属性名称更改时可自动替换// - 通过表达式 c c. 可以直接调出组件定义的属性方便阅读// - 可通过TValue直接限定属性的类型开发时即可编译检查public ComponentBuilderT SetTValue(ExpressionFuncT, TValue selector, TValue value){var property TypeHelper.Property(selector); //通过属性选择器表达式获取组件参数属性return Add(property.Name, value); //添加组件参数}//组件构建方法action为返回组件对象实例的委托默认为空不返回实例public void Build(ActionT action null){builder.OpenComponentT(0); //开始附加组件if (Parameters.Count 0)builder.AddMultipleAttributes(1, Parameters); //批量添加组件参数if (action ! null)builder.AddComponentReferenceCapture(2, value action.Invoke((T)value)); //返回组件对象实例builder.CloseComponent(); //结束附加组件}
}4. 属性选择器
为什么要用属性选择器组件建造者类中已经提到下面介绍如何通过属性选择器表达式来获取组件类型的属性对象。
public class TypeHelper
{//通过属性选择器表达式来获取指定类型的属性public static PropertyInfo PropertyT, TValue(ExpressionFuncT, TValue selector){if (selector is null)throw new ArgumentNullException(nameof(selector));if (selector.Body is not MemberExpression expression || expression.Member is not PropertyInfo propInfoCandidate)throw new ArgumentException($The parameter selector {selector} does not resolve to a public property on the type {typeof(T)}., nameof(selector));var type typeof(T);var propertyInfo propInfoCandidate.DeclaringType ! type? type.GetProperty(propInfoCandidate.Name, propInfoCandidate.PropertyType): propInfoCandidate;if (propertyInfo is null)throw new ArgumentException($The parameter selector {selector} does not resolve to a public property on the type {typeof(T)}., nameof(selector));return propertyInfo;}
}5. 总结
以上就是组件建造者的完整实现过程代码不长但这些功能足以完成手动构建Blazor组件的需求。
