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

Question

我有一个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 组件？

Answer 1

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>