Blazor University （5）组件 — 字面量、表达式和指令

原文链接：https://blazor-university.com/components/literals-expressions-and-directives/

字面量、表达式和指令

源代码^[1]

请注意，本节一般不涵盖 Razor 标记。它不会涵盖诸如条件输出、循环等内容。该主题在网络和书籍中的其他地方得到了广泛的介绍。

使用组件时，我们可以将信息作为参数传递。这些参数可以是简单类型，例如整数、字符串、布尔值，也可以是复杂类型，例如 Func、Action 或复杂对象的实例。与 HTML 属性不同，我们不限于可以在纯 HTML 文件中表示为值的值。

Blazor 如何解释我们传递给组件的值取决于我们正在设置的 [Parameter] 的类型，以及我们是否通过使用 @ 符号明确了我们的意图。

参数使用 name=value 格式分配，就像它们在 HTML 标记中一样。我们是否使用表达式来确定值、指令（一种特殊情况）或文字取决于 @ 符号的位置（或不存在）。

位置	类型	示例
不存在	字面量
右	表达式
左	指令
记住这一点的一个简单方法是“灯泡法”。我们从右到左拼出缩写 L.E.D[2]。

与 HTML 标记一样，Blazor 标记允许我们选择是否希望将值括在引号中。以下是等价的。

我个人的偏好是仅在传递文字字符串时才将参数值括在引号中。

字面量

任何传递给 HTML 属性的值（不以 @ 开头）都被视为字面量。将值传递给 Blazor 组件上的 [Parameter] 修饰属性时，情况并非总是如此（我将在此处^[3]详细介绍），但在大多数情况下，此规则适用。

类型	Razor 视图	HTML
HTML 属性
组件参数		Hello

MyHeader 的定义如下：

@if (Visible)
{
  
@Text
}

@code
{
  [Parameter]
  public bool Visible { get; set; } = true;

  [Parameter]
  public string Text { get; set; }
}

除了推断表达式^[4]（仅适用于组件上的参数，而不适用于 HTML 属性）之外，在渲染组件时，您在 HTML 中看到的内容实际上就是您在标记中编写的内容。

表达式

当我们需要渲染包含动态值而不是固定文字值的 HTML 时，我们需要使用表达式。我们通过在我们分配的值之前添加 @ 符号来向 Blazor 表明我们正在使用表达式。然后，Blazor 将尝试将 @ 后面的文本解释为一段有效的 C# 代码，例如成员名称或方法调用。

给定我们组件中定义以下成员和值的代码部分：

int InputSize = 8;
bool HeaderVisible = true;
string HeaderText = "Value of variable";

private int DoubleInputSize()
{
  return InputSize * 2;
}

我们希望看到以下内容：

Razor 视图	HTML
	Value of variable

我们甚至可以通过将表达式文本括在括号中来传递更复杂的表达式，例如字符串插值和/或计算值。

Razor 视图	HTML

计算为复杂类型的表达式

复杂类型也可以作为参数值传递给 HTML 属性和 Blazor 组件的 [Parameter] 属性。将非简单值作为表达式传递给 HTML 属性时，Blazor 将使用 ValuePassed.ToString() 呈现该值；当值被传递到 Blazor 组件上的 [Parameter] 属性时，对象本身被传递。

以下面的 Person 类为例：

public class Person
{
  public string Salutation { get; set; }
  public string GivenName { get; set; }
  public string FamilyName { get; set; }

  public override string ToString() => $"{Salutation} {GivenName} {FamilyName}";
}

如果我们在其中一个视图中创建 Person 的实例，我们可以将该实例作为值传递给标准 HTML 属性，并且 Blazor 将使用重写的 ToString() 方法来表示该值。

  To HTML attribute using .ToString()

  

@code {   Person MyPerson;   protected override void OnInitialized()   {     base.OnInitialized();     MyPerson = new Person     {       Salutation = "Mr",       GivenName = "Peter",       FamilyName = "Morris"     };   } }

• 第 8 行 声明 Person 类型的成员

• 第 13 行 创建 Person 的实例

• 第 3 行将 Person 实例作为 HTML 属性传递

呈现的 HTML 如下：

  To HTML attribute using .ToString()