如何使用Blazor组件定位特定的div？

问题描述

我有一个top-row div，如下：

   <div class="top-row px-3">
      <b>App:<i>Title</i></b>

      <!-- wait for it ... -->
      <div class="menu">
         Menu Bar Here
      </div>

   </div>

我将有几个MenuBar组件，只需单击一下按钮即可将它们替换为div类menu 。如何使用Blazor组件定位该div？

更新
我想我找到了Chris Sainty的解决方案。

修改
为了阐明我打算完成的工作：

我有2个组成部分：

• <MenuBar1 />
• <MenuBar2 />

两者都包含不同的html来构造一个简单的菜单栏。我有导航链接，单击该导航链接将引发onClick事件。

如何单击链接时可以换出 MenuBar 组件？

解决方法

Blazor不使用Javascript策略。 为此，您必须将HTML与代码混合。

<div class="top-row px-3">
    <b>App:<i>Title</i></b>
    <!-- wait for it ... -->
    <div class="menu">
        @if (Version == "v1")
        {
            <p>version 1</p>
        }
        else if (Version == "v2")
        {
            <p>version 2</p>
        }
    </div>
</div>

对于动态菜单，请在共享文件夹中添加文件。 文件名=类名 例如 MenuButton .razor

@inject NavigationManager navManager
<button @onclick="(e)=>navManager.NavigateTo(route)">@(label)</button>

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

要消耗该分量

<div class="top-row px-3">
    <b>App:<i>Title</i></b>
    <!-- wait for it ... -->
    <div class="menu">
        <MenuButton label="Choice 1" route="/route1" />
        <MenuButton label="Choice 2" route="/route2" />
    </div>
</div>