首先需要区分的是Razor组件标签和HTML标签。例如,为了解释HxButton组件中的OnClick是什么以及如何与button标签中的@onclick进行比较。因此,让我稍微详细介绍一下这个问题和其他相关困难,以便让困惑的读者更好地理解主题。
HxButton是一个Razor组件,它有一个名为OnClick的参数属性,已经赋值为"StartClick",这是在父组件中定义的方法的名称。该方法可能具有参数。
HxButton
组件的父容器
<HxButton OnClick="StartClick"/>
@code
{
private void StartClick (string value)
{
}
}
在HxButton组件的定义中确定了参数的数量和类型。下面是组件中OnClick参数属性的定义:
[Parameter] public EventCallback<string> OnClick {get
请注意,此事件“delegate”封装了一个具有单个字符串类型参数的方法。当在HxButton组件内执行此委托时,例如:
OnClick.InvokeAsync(value);
,将调用分配给OnClick参数属性的StartClick方法,在实例化HxButton时传递一个字符串值。
OnClick被定义为一个属性,编译器没有困难看到它。按钮HTML标记中的@onclick是一个编译器指令属性。它指示编译器分配给该属性的值应该是在触发按钮元素的click事件时调用的方法。它还告诉编译器在幕后创建一个EventCallback“delegate”的事件回调来表示回调方法。
但您可以使用这样的结构:
onclick="alert('Hello')"
。在这种情况下,onclick被编译器视为纯HTML属性,并且呈现为is。要区分这两种可能性,您必须指示编译器您想要做什么。因此是at“sign”的使用。顺便说一句,onclick =“alert('Hello')”,是纯JavaScript。
请注意:分配给OnClick参数属性的值是应评估为EventCallback的表达式,因此它可以是方法的名称,也可以是lambda表达式,例如:
OnClick="@((value) => StartClick(value))"
还要注意,方法的名称可以以@符号开头,如下所示:
OnClick="@StartClick"
。
当Blazor处于初始开发阶段时,这是必需的。现在不再需要了,但用户不强制不使用它。我花了一些时间才摆脱像这样使用它的习惯。如今,我总是跳过@符号。
总之,所有编译器指令属性都应以@符号开头,例如@ref @onclick @oninput等。
“为什么StartButtonText有@符号”
因为它是一个应评估为字符串值的表达式。首先,我建议您使用带引号的括号,例如:
<HxButton Text="@StartButtonText" />
注意:
"@StartButtonText"
是一个字符串插值表达式,它使得在HxButton组件上定义的Text属性和主机组件上定义的变量StartButtonText之间实现数据绑定。
请注意,您必须应用
@
符号,否则字符串Text属性将包含字符串
StartButtonText
,而不是变量
StartButtonText
中存储的值。
为什么ThemeColor.Primary要用引号括起来,而StartButtonText不用?
这个问题属于人性的范畴,或者说应该向
Peter Morris提问,他的论文导致了不遵守统一性的混乱。我之所以特别提到他,是因为你提供了一个称为“好的解释”的链接。
无论如何,您可以像这样做:
Color="ThemeColor.Primary"
或者像这样:
Color="@ThemeColor.Primary"
或者像这样:
Color=ThemeColor.Primary
或者像这样:
Color=@ThemeColor.Primary
。
如果你问你的代码作者:
为什么ThemeColor.Primary要用引号括起来,而StartButtonText不用?
,他可能会试图归咎于人类的不一致性而不是自己的无能。
Visual Studio编辑器会自动插入双引号,您需要在其中提供一个值,这就是应该做的方式。个人喜好,正如Peter Morris所传授的那样,可能对社会不利。你的问题是一个好问题,因为它显示了同一行中这种荒谬的不一致性的存在:是的,为什么要将
ThemeColor.Primary
用引号括起来,而不是StartButtonText...