Blazor实例化组件替代标签后菜单不显示问题求助

问题场景 #

通过Visual Studio for Mac创建名为TestBlazorWebAssemblyProgressiveNetCoreApp的Blazor WebAssembly Hosted + PWA解决方案后，修改NavMenu.razor的菜单渲染逻辑为动态列表生成模式，并添加AddItem方法。随后在MainLayout.razor中手动实例化NavMenu组件并通过@NavMenuItem输出，发现菜单完全不显示，但使用<NavMenu />标签则功能正常。

问题原因 #

Blazor的组件渲染完全依赖**渲染树（Render Tree）**和框架的生命周期管理，手动new NavMenu()创建的实例存在两个核心问题：

1. 未被Blazor渲染引擎纳入渲染树，无法触发组件的初始化、渲染等生命周期方法（如OnInitializedAsync、BuildRenderTree），自然不会生成对应的DOM元素；
2. 组件内部状态与UI渲染逻辑无法被框架追踪，即便实例化代码执行，也只是创建了一个普通的C#对象，而非可渲染的Blazor组件。

而使用<NavMenu />标签时，Blazor编译器会自动将其转换为渲染树节点，由框架负责组件的实例化、生命周期调度和UI渲染，这是Blazor组件的标准工作流程。

另外，你在Item类中存储ComponentBase实例的设计也不合理——Blazor组件不能通过提前实例化的方式复用，组件的实例化与渲染必须由框架控制，否则会导致生命周期紊乱、状态丢失等问题。

正确实现方式 #

如果需要动态控制菜单内容，无需手动实例化组件，推荐以下两种方案：

方案1：通过参数传递动态菜单数据 #

1. 改造NavMenu.razor，将菜单列表改为可绑定参数：

@foreach (Item item in MenuItems)
{
    <div class="nav-item px-3">
        <NavLink class="nav-link" href="@item.Path" Match="NavLinkMatch.All">
            <span class="oi @item.TextStyle" aria-hidden="true"></span> @item.Title
        </NavLink>
    </div>
}

@code {
    [Parameter]
    public List<Item> MenuItems { get; set; } = new()
    {
        new Item("", "Home", "oi-home"),
        new Item("counter", "Counter", "oi-plus")
    };

    public class Item
    {
        public string Path { get; }
        public string Title { get; }
        public string TextStyle { get; }

        public Item(string path, string title, string textStyle)
        {
            Path = path;
            Title = title;
            TextStyle = textStyle;
        }
    }
}

2. 在MainLayout.razor中通过组件标签传递自定义菜单：

<NavMenu MenuItems="@customMenuItems" />

@code {
    private List<NavMenu.Item> customMenuItems = new()
    {
        new NavMenu.Item("", "Home", "oi-home"),
        new NavMenu.Item("counter", "Counter", "oi-plus"),
        new NavMenu.Item("fetchdata", "Fetch data", "oi-list-rich")
    };
}

方案2：使用RenderFragment动态渲染组件 #

如果确实需要通过代码逻辑动态添加组件，可通过RenderFragment让Blazor框架负责渲染流程，本质与使用组件标签等价：

@NavMenuFragment

@code {
    private RenderFragment NavMenuFragment => builder =>
    {
        // 让Blazor框架创建并渲染NavMenu组件
        builder.OpenComponent<NavMenu>(0);
        // 可在此处添加组件参数，如传递自定义菜单列表
        // builder.AddAttribute(1, nameof(NavMenu.MenuItems), customMenuItems);
        builder.CloseComponent();
    };
}

内容的提问来源于stack exchange，提问作者Asier Cayón Francisco