有人可以解释 Blazor 组件标签的各种语法吗

Question

在我的 .razor 文件中，我有这些标签（只是一个示例）。它们有效，但我无法向自己解释各种语法背后的原因

<HxButton Text=@StartButtonText OnClick="StartClick" Color="ThemeColor.Primary"/>
        
<Listener @ref=_listener/>
    
<button  @onclick=Show>Modal</button>

具体来说

• 为什么有些标签的名称开头有 @（例如 ref 和 onclick），而其他标签则没有。
• 为什么 ThemeColor.Primary 在引号中而不是 StartButtonText
• 为什么 StartButtonText 有一个 @ 符号
• 为什么按钮的 @onclick 具有纯文本（而不是 @Show 或“Show”）

我讨厌每次都随机循环语法来找到有效的语法。

注意，HxButton来自HAVIT组件库，Listener是我构建在HAVIT HxModal之上的组件

Answer 1

Blazor 是 C# 和 HTML 两种语言的交汇点。此外，在某些情况下，两种语言都允许多种语法变体。

• 为什么有些标签的名称开头有 @（例如 ref 和 onclick），而其他标签则没有。

指令属性（@ref、@key等@onclick）需要一个@在前面加一个以表明它们是 C# 的。这是必要的，因为这些属性通常具有 HTML/JS 等效项。它们以小写字母开头。

当组件定义参数时，您不需要@但它是允许的。Blazor 的第一个版本需要它。

其他一切都传递给 HTML/JS。

• 为什么 ThemeColor.Primary 在引号中而不是 StartButtonText

StartButtonText 在引号中会更好，但这在 HTML 中是一种宽大处理。Text="@StartButtonText"被推荐。

• 为什么 StartButtonText 有一个 @ 符号

这是 Blazor（Razor 语法）的主要“开关”。如果没有，@您将在屏幕上看到字符串“StartButtonText”。有了 ，@它就成为 C# 变量的名称。@这与中相同@foreach() {...}。

当需要委托（方法）时，这@是允许的，但不是必需的。

• 为什么按钮的 @onclick 具有纯文本（而不是 @Show 或“Show”）

此时已经很清楚它Show必须是一个 C# 方法。如果不是的话，你会得到一个错误。无需@切换语言。@但 C# 允许在任何名称前面添加。这是一个转义规则，允许您使用保留字int @int = 3;，但也允许使用非保留字。使用Showor"Show"又是 HTML 的一种宽容。

@onclick="Show"被推荐。

Answer 2

这里首先要区分的是 Razor 组件标记和 HTML 标记，例如解释 HxButton 组件中的 OnClick 是什么，以及如何将其与按钮标记中的 @onclick 进行比较。因此，让我稍微扩展一下这个问题和其他相关的困难，以便困惑的读者可以更好地理解这个主题。

HxButton 是一个 Razor 组件，它具有一个名为 OnClick 的参数属性，该属性已分配了值“StartClick”，该值是在父组件中定义的方法的名称。该方法可能有参数。

HxButton组件的父容器

<HxButton OnClick="StartClick"/>

@code
{
   private void StartClick (string value)
   {

   } 
}

有多少个参数及其类型是在 HxButton 组件的定义中确定的。以下是组件中 OnClick 参数属性的定义：

[Parameter] public EventCallback<string> OnClick {get; set;} 

请注意，此事件“委托”封装了一个具有字符串类型的单个参数的方法。当从 HxButton 组件内部执行此委托时（例如， ）OnClick.InvokeAsync(value);，将调用实例化中StartClick分配给参数属性的方法，并向其传递一个字符串值。OnClickHxButton

OnClick 被定义为一个属性，编译器可以轻松地看到它。按钮 Html 标记中的 @onclick 是编译器指令属性。它指示编译器分配给属性的值应该是click触发按钮元素的事件时调用的方法。它还告诉编译器在幕后创建 EventCallback“委托”的事件回调来表示回调方法。

但您可以使用这样的构造：onclick="alert('Hello')".在这种情况下，onclick被编译器视为纯 Html 属性，并呈现as is。为了区分这两种可能性，您必须指示编译器您想要做什么。at“符号”的用法也是如此。顺便说一句，onclick="alert('Hello')", 是纯 JavaScript。

注意：分配给参数属性的值OnClick是一个表达式，其计算结果应为EventCallback<string>，因此它可以是方法的名称，也可以是 lambda 表达式，例如：

OnClick="@((value) => StartClick(value)"

另请注意，方法的名称可以在前面加上@这样的符号：OnClick="@StartClick"

当 Blazor 处于初始开发阶段时，这是必要的。它不再是必要的，但不会强制用户不使用它。我花了一些时间才改掉这样使用它的习惯。如今，我总是跳过这个@标志。

总而言之，所有编译器指令属性都应该在前面加上符号@，例如 @ref @onclick @oninput 等。

为什么 StartButtonText 有一个 @ 符号

因为它是一个应该计算为字符串值的表达式。首先，我建议您将其与引号一起使用，如下所示：

<HxButton Text="@StartButtonText" />

注意：是一个字符串插值表达式，它启用组件上定义的属性与托管组件上定义的变量"@StartButtonText"之间的数据绑定。TextHxButtonStartButtonText

另请注意，您必须应用该@符号，否则字符串 Text 属性将包含字符串StartButtonText而不是存储在变量中的值StartButtonText

为什么 ThemeColor.Primary 在引号中而不是 StartButtonText

这个问题属于人性部门，或者也许应该针对彼得莫里斯，他的论文导致无政府状态而不是遵守统一性。我特别提到他，因为您提供了您所称内容的链接a good explanation

无论如何，你可以这样做：或者像这样Color="ThemeColor.Primary" ：Color="@ThemeColor.Primary"或者像这样：Color=ThemeColor.Primary或者像这样：Color=@ThemeColor.Primary

如果你问你的代码的作者：Why is ThemeColor.Primary in quotes but not StartButtonText，他可能会试图责怪人类的不一致，而不是他的无能。

Visual Studio 编辑器会自动插入双引号，您应该在其中提供一个值，这就是应该如何完成的。正如彼得·莫里斯所宣扬的，个人偏好可能对社会有害。你的问题很好，因为它表明在同一行中存在这种荒谬的不一致：是的，为什么用ThemeColor.Primary引号引起来而不是 StartButtonText......