如何在Blazor中实现Radix的AsChild/Slot组件模式

核心实现思路 #

通过解析组件的子内容，将组件自身接收的属性（如样式、事件）合并到子元素上，替代原组件的默认渲染，达到Radix asChild模式的效果。

可复用组件示例（以Button为例） #

创建Button.razor文件：

@if (AsChild)
{
    @RenderChildWithMergedAttributes()
}
else
{
    <button @attributes="AdditionalAttributes">
        @ChildContent
    </button>
}

@code {
    [Parameter] public bool AsChild { get; set; }
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] 
    public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private RenderFragment RenderChildWithMergedAttributes() => builder =>
    {
        var childBuilder = new RenderTreeBuilder();
        ChildContent?.Invoke(childBuilder);
        var frames = childBuilder.GetFrames();

        if (frames.Count == 0) return;

        var firstFrame = frames[0];
        // 子内容不是HTML元素时直接渲染
        if (firstFrame.FrameType != RenderTreeFrameType.Element)
        {
            ChildContent?.Invoke(builder);
            return;
        }

        // 打开子元素标签，合并属性
        builder.OpenElement(firstFrame.Sequence, firstFrame.ElementName);
        // 保留子元素原有属性
        firstFrame.Attributes?.ToList().ForEach(attr => 
            builder.AddAttribute(attr.Sequence, attr.Name, attr.Value));
        // 追加组件接收的额外属性
        AdditionalAttributes?.ToList().ForEach(attr => 
            builder.AddAttribute(RenderTreeBuilder.AutoSequence, attr.Key, attr.Value));
        // 渲染子元素的内部内容
        for (var i = 1; i < frames.Count; i++)
        {
            builder.AddFrame(frames[i]);
        }
        builder.CloseElement();
    };
}

使用方式 #

完全贴合示例写法，组件会自动将自身属性合并到子元素上：

<Button AsChild class="text-blue-600 hover:underline">
    <a href="/contact">Contact</a>
</Button>

上述代码中，Button的class属性会被合并到<a>标签上，最终渲染出带样式的链接。

注意事项 #

• 默认只处理子内容中的第一个根元素，多根元素场景下仅会修改第一个元素；
• 同名属性会按“组件属性覆盖子元素属性”的规则生效（Blazor渲染机制决定）；
• 该逻辑可直接复用在其他组件（如Card、DialogTrigger等）中，只需替换默认渲染的元素即可。

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