如何用RenderTreeBuilder实现Blazor Radzen单选列表父子组件构建？

你当前的代码存在几个关键问题，导致Radzen单选列表组件无法正常工作，以下是修正后的实现方案和核心说明：

问题分析 #

1. 错误使用ChildContent：RadzenRadioButtonList的子项并非直接放在根级ChildContent中，而是需要绑定到Items属性，或通过内部的Items容器组件渲染；
2. 双向绑定不完整：仅设置Value和ValueChanged不足以实现完整的双向绑定，缺少ValueExpression会导致绑定失效；
3. 语法错误：原代码中ChildContent的lambda表达式未正确闭合，组件序列ID不连续（虽非致命，但易引发潜在问题）；
4. 泛型参数不匹配：ValueChanged的泛型参数误用T，应与组件泛型类型int保持一致。

方案一：直接绑定Items属性（推荐） #

这种方式更符合Radzen组件的设计逻辑，代码简洁且不易出错：

RenderFragment MyRadioButtonList()
{
    return builder =>
    {
        // 打开RadzenRadioButtonList<int>组件，序列ID从0开始
        builder.OpenComponent<RadzenRadioButtonList<int>>(0);
        
        // 绑定Value
        builder.AddAttribute(1, "Value", value);
        // 绑定ValueChanged回调
        builder.AddAttribute(2, "ValueChanged", EventCallback.Factory.Create<int>(this, async (int selectedValue) =>
        {
            value = selectedValue;
            await ValueChanged.InvokeAsync(selectedValue);
        }));
        // 添加ValueExpression，确保双向绑定完整
        builder.AddAttribute(3, "ValueExpression", () => value);

        // 构造子项集合并绑定到Items属性
        var radioItems = new List<RadzenRadioButtonListItem<int>>
        {
            new() { Text = "Orders", Value = 1 },
            new() { Text = "Employees", Value = 2 },
            new() { Text = "Customers", Value = 3 }
        };
        builder.AddAttribute(4, "Items", radioItems);

        // 关闭组件
        builder.CloseComponent();
    };
}

方案二：模拟ChildContent嵌套写法（对应你提供的标签式示例） #

如果你需要完全模拟<Items>标签嵌套的写法，需渲染Radzen内部的Items容器组件：

RenderFragment MyRadioButtonList()
{
    return builder =>
    {
        builder.OpenComponent<RadzenRadioButtonList<int>>(0);
        
        builder.AddAttribute(1, "Value", value);
        builder.AddAttribute(2, "ValueChanged", EventCallback.Factory.Create<int>(this, async (int selectedValue) =>
        {
            value = selectedValue;
            await ValueChanged.InvokeAsync(selectedValue);
        }));
        builder.AddAttribute(3, "ValueExpression", () => value);

        // 添加根级ChildContent，用于渲染Items容器
        builder.AddAttribute(4, "ChildContent", (RenderFragment)(builder2 =>
        {
            // 打开RadzenRadioButtonList的Items容器组件
            builder2.OpenComponent<RadzenRadioButtonListItems<int>>(5);
            
            // 添加Items容器的ChildContent，渲染单个子项
            builder2.AddAttribute(6, "ChildContent", (RenderFragment)(builder3 =>
            {
                // 渲染第一个单选项
                builder3.OpenComponent<RadzenRadioButtonListItem<int>>(7);
                builder3.AddAttribute(8, "Text", "Orders");
                builder3.AddAttribute(9, "Value", 1);
                builder3.CloseComponent();

                // 渲染第二个单选项
                builder3.OpenComponent<RadzenRadioButtonListItem<int>>(10);
                builder3.AddAttribute(11, "Text", "Employees");
                builder3.AddAttribute(12, "Value", 2);
                builder3.CloseComponent();

                // 渲染第三个单选项
                builder3.OpenComponent<RadzenRadioButtonListItem<int>>(13);
                builder3.AddAttribute(14, "Text", "Customers");
                builder3.AddAttribute(15, "Value", 3);
                builder3.CloseComponent();
            }));
            
            builder2.CloseComponent();
        }));

        builder.CloseComponent();
    };
}

核心注意事项 #

• 泛型一致性：所有相关组件的泛型参数必须统一（此处为int），避免类型不匹配；
• 序列ID：保持组件和属性的序列ID连续，可减少渲染时的潜在问题；
• 双向绑定三要素：Value、ValueChanged、ValueExpression缺一不可，否则@bind-Value无法正常工作。

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