我们如何在单独的代码文件中创建可重用的RenderFragment？

Question

在这篇 Microsoft 文章中，他们展示了如何将一段 Blazor 代码提取到一个方法中，以便可以重用它。他们展示了以下示例...

<h1>Hello, world!</h1>

@RenderWelcomeInfo

<p>Render the welcome info a second time:</p>

@RenderWelcomeInfo

@code {
    private RenderFragment RenderWelcomeInfo = __builder =>
    {
        <p>Welcome to your new app!</p>
    };
}

然后他们继续解释说，如果你想将此方法提取到一个单独的.razor文件中，你可以将其制作为static.

对于一个简单的示例（例如它们所显示的示例）来说，这一切都很好，但如果您想要任何实际的东西，那么您可能需要向该方法传递至少一个参数。

但是，如果您更改他们的SayHello示例以采用参数......

  public static RenderFragment SayHelloName(string name) = __builder => {
    <h1>Hello @name</h1>
  };

...然后你会得到一些有趣的编译器错误组合...

• 该=标志有红色下划线，将鼠标悬停在其上会出现错误Function body Expected

• 该变量__builder以红色突出显示，将鼠标悬停在其上会出现错误“无法解析符号”__builder

• 变量后面的空格__builder以红色突出显示，将鼠标悬停在其上会出现错误无法解析符号__builder\n\n意外的标记

• 有=>一个红色下划线，将鼠标悬停在上面会出现错误并非所有代码路径都返回“RenderFragment”类型的 lambda 表达式中的值（这很有趣，因为返回类型没有泛型类型）

• name方法主体中的用法为红色，并出现错误无法解析符号“名称”

• 末尾右侧用红色下划线显示，并显示}预期};错误，其中左大括号是类声明。

更令人困惑的是，只有第四个和第五个错误出现在错误面板中，尽管措辞略有不同。

按照Telerik 知识库中显示的示例，我尝试了以下操作...

  public static RenderFragment<object> SayHelloName(string name) => context => __builder   => {
    <h1>Hello @name</h1>
  };

然而，当我尝试使用这个时......

<div>@SayHelloName("Jim")</div>

...页面上呈现以下内容...

Microsoft.AspNetCore.Components.RenderFragment`1[System.Object]

...而不是我预期的“Hello Jim”。

谁能解释我做错了什么？如何提取将参数传入单独的类的 RenderFragment 方法？

Answer 1

替代语法：

@page "/razor-template"

@timeTemplate

@petTemplate(new Pet { Name = "Nutty Rex" })

@code {
    private RenderFragment timeTemplate = @<p>The time is @DateTime.Now.</p>;
    private RenderFragment<Pet> petTemplate = (pet) => @<p>Pet: @pet.Name</p>;

    private class Pet
    {
        public string? Name { get; set; }
    }
}

这是来自文档：https://learn.microsoft.com/en-gb/aspnet/core/blazor/components/ ?view=aspnetcore-6.0#razor-templates