如何在 Blazor 中通过单击按钮渲染组件？

Question

我是新手，对单页应用程序框架和Blazor都不太熟悉，所以这可能是一个容易回答的问题，但我在其他地方找不到答案。

我想在用户点击特定按钮后，在页面上某个位置显示组件。我目前是这样实现的：

@page "/test"

<button type="button" @onclick="() => showSignUpComponent = true">
    Show Sign Up Window
</button>

@if (showSignUpComponent)
{
    <SignUp />
}

@code {
    bool showSignUpComponent;
} 

我想知道在Blazor中是否有更好、更清晰的方式（即正确的方式）来做这样的事情，还是这是常见的和“标准”的方式？

- aradalvand

Answer 1

你所做的方式很好，我敢说这是标准的方法！

如果有不同的情况，你也可以使用稍微不同的方式。例如，你可以定义一个字符串变量而不是布尔变量，并在其中存储一些相关信息等。

然而，不必深究。你所做的完全没问题，这表明你理解了当触发UI事件（如“click”）时，组件将重新呈现，并且不需要调用StateHasChanged...

- enet

---

谢谢您，先生。最后一个请求，您能否提供一个简单的示例来演示当您说我们可以使用字符串变量而不是布尔变量时的意思，因为我不明白为什么要这样做。 - aradalvand

@AmirHosseinAhmadi 我不确定 @enet 的意思是否如此，但是你可以在单击按钮时调用的方法中填充一个字符串变量。在该方法中，您检查它是单击左键、单击右键、双击左键等，并相应地填充您的字符串变量（例如 stringClicked = "leftsingle"）。然后，您可以通过评估字符串变量的值来显示组件。 - devbf