MVC 应用程序中的嵌套 Blazor 组件

Question

我已在 This Guide. 之后将 Blazor 组件添加到我现有的 MVC 应用程序中，这按预期工作，我能够让 Blazor 组件呈现，但是我无法使用 Blazor 组件创建简单列表，因为我无法获得组件嵌套正确。

我已在 Blazor 应用程序中正确呈现简单列表的以下代码；

SimpleList.blazor

<ol>
    @ChildContent
</ol>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
}

SimpleListItem.blazor

<li>
    <span>@Text</span>
</li>

@code {
    [Parameter]
    public string Text { get; set; }
}

Index.razor

<SimpleList>
    <SimpleListItem Text="Item 1"></SimpleListItem>
    <SimpleListItem Text="Item 2"></SimpleListItem>
</SimpleList>

在上面显示的 blazor 应用程序中使用这些组件时，这会产生具有两个项目的有序列表的所需结果。但是，由于直接在 MVC 应用程序中使用 blazor 组件名称is not supported，我改为使用 helper 标记，目前正在执行以下操作；

Index.cshtml

<component type="typeof(Components.SimpleList)" render-mode="Server">
    <component type="typeof(Components.SimpleListItem)" render-mode="Server" param-Text="@("Item 1")"/>
    <component type="typeof(Components.SimpleListItem)" render-mode="Server" param-Text="@("Item 2")"/>
</component>

但这不起作用，列表项没有在列表中呈现，并且正在生成以下 HTML

生成的 HTML

<ol><!--!--></ol>
<li><span>Item 1</span></li>
<li><span>Item 2</span></li>

是我做错了什么还是 MVC 应用程序不支持嵌套组件？

Answer 1

<component> 标签本身不能以这种方式嵌套。它可以渲染一个单个组件（它本身可能有嵌套的 Razor 组件）。

如果Index.razor 在这种情况下可以访问，您可以尝试

<component type="typeof(Components.Index)" render-mode="Server">
</component>

标签助手正在渲染第一个组件SimpleList，但子内容为空，因此

<ol><!--!--></ol>

然后标签助手渲染内部项目：两个SimpleListItem引用导致

<li><span>Item 1</span></li>
<li><span>Item 2</span></li>