如何将 html/components 传递给 blazor 模板？

Question

这是我的案例：

我有一个组件 Foo，我希望它有一个名为 Wrapper 的 blazor 模板，它将用于包装 Foo 的部分内容。

我需要做的是

正常使用：

<Foo>
    <Wrapper>
        <div>
            <p>Something in the wraper</p>
            @context // context should be some content of Foo
        </div>
    </Wraper>
</Foo>

里面Foo

@* Other content of Foo*@

@if(Wrapper != null){
    @* Pass to Wrapper some content of Foo *@
    Wrapper(@* How to render html/components here? *@)
}

@* Other content of Foo*@

但是没有办法为模板传递html或组件？

我该怎么做？

Answer 1

在这种情况下，您的 Wrapper 是一个 RenderFragment，您想要接受另一个 RenderFragment，因此它的签名是

[Parameter] public RenderFragment<RenderFragment> Wrapper {get;set;}

这是完整的Foo.razor

@* Other content of Foo*@
<h1>This is Foo</h1>

@if(Wrapper != null){
    @* Pass to Wrapper some content of Foo *@
    @Wrapper(
        @<h2>This comes from Foo</h2>
    )
}

<h1>There is no more Foo</h1>

@code 
{
    [Parameter] public RenderFragment<RenderFragment> Wrapper {get;set;}
}

仔细注意 Wrapper 调用中的结构。

1. 从@Wrapper 开始，所以这是来自 Razor 的调用

2. Wrapper 后打开(让你回到C# 地盘，所以-

3. 使用 @ 切换回 Razor 代码。

4. 现在您可以使用 Razor/HTML 标记 <h2>This comes from Foo</h2>

5. 使用 )

   结束对 Wrapper 的调用

这就是您如何使用将 RenderFragment 作为上下文的 RenderFragment。

这个输出将是

这是 Foo

包装袋里的东西

这来自 Foo

没有更多的 Foo

你可以在这里测试一下https://blazorfiddle.com/s/ox4tl146