如何在 Blazor 中创建 `AsChild` 或 `Slot`

Question

我长期以来一直在寻找这个问题的答案。我想要的只是能够在 Blazor 中重新创建 Radix 的插槽组件/

asChild

模式。

例如

<Button AsChild>
    <a href="/contact">Contact</a>
</Button>

Answer 1

感谢@DanielD 让我走上正确的轨道。

我创建了一个抽象类（您不需要需要执行此操作，您只需将这些属性添加到您想要具有此功能的任何组件即可）。

public abstract class Slot : ComponentBase
{
    [Parameter]
    public required RenderFragment<Dictionary<string, object>> ChildContent { get; set; }

    [Parameter]
    public bool AsChild { get; set; }
}

按钮.razor.cs

指定您想要绘制的属性。

public partial class Button : Slot
{
    private static Dictionary<string, object> _attributes =>
        new() { { "onclick", () => Console.WriteLine("Button was clicked!") } };
}

按钮.剃须刀

为默认组件创建标记（当未使用

AsChild

时）。

@inherits Slot

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

现在您可以在任何您喜欢的地方使用以下内容。

AsChild

的用法：

<Button AsChild>
    <a href="#" @attributes="context">Click me!</a>
</Button>

不使用

AsChild

的用法：

<Button>
    Click me!
</Button>