如何使用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类menu中交换，只需单击按钮。如何使用Blazor组件瞄准该div？

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

编辑
澄清我打算完成的任务：

我有两个组件：

• <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.rarzor

@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>