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

Question

我有一个top-rowdiv如下：

   <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 class menu 中换出，只需单击一个按钮.如何使用 Blazor 组件定位 div？

更新
我想我通过 Chris Sainty.

找到了解决方案

编辑
澄清我打算完成的事情：

我有两个组件：

• <MenuBar1 />
• <MenuBar2 />

两者包含不同的 html 以构建一个简单的菜单栏。我有导航 link，单击时会引发 onClick 事件。

如何在单击 link 时换出 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>

对于动态菜单，在共享文件夹中添加一个文件。 文件名 = class 名称 例如 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>