html - 如何使用 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 类中交换出来。如何使用 Blazor 组件定位该 div？menu

更新
我想我找到了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>