如何使用 RenderTreeBuilder 绑定对 blazor 中组件的引用？

Question

我想知道如何使用RenderTreeBuilder实现@ref属性。 以下 blazor 代码是讨论解决方案的简约示例：

<MudForm @ref="_Form">@ChildContent</MudForm>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private MudForm _Form;
}

我想使用RenderTreeBuilder重新实现引用MudForm的 blazor 代码。 因此我已经尝试了以下方法，但它对我不起作用：

private RenderFragment formControl => (builder) =>
    {
        builder.OpenComponent<MudForm>(0);
        builder.AddElementReferenceCapture(1, (value) => { _Form = value.Context; });
        builder.AddAttribute(2, nameof(MudForm.ChildContent), ChildContent);
        builder.CloseComponent();
    };

我不知道AddElementReferenceCapture方法是否正确使用RenderTreeBuilder将_Form绑定到组件实例。 有人可以帮我吗？

Answer 1

我认为您需要转换value因为它是作为object提供的。

请看下面的代码：

builder.AddElementReferenceCapture(1, (value) => { _Form = (MudForm)value; });

以供参考：

您可以通过将此行添加到项目文件中来让 Razor 编译器发出类文件：

  <PropertyGroup>
  .....
      <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
  </PropertyGroup>

然后查看/obj/Debug/net6.0/generated/....中的文件

这是一个简单的 Razor 文件：

@page "/"

<h1>Hello, world!</h1>

<MinimumComponent @ref=this.myComponent/>

@code {
    private MinimumComponent myComponent;
}

Razor 编译器生成的代码：

    public partial class Test : Microsoft.AspNetCore.Components.ComponentBase
    {
        #pragma warning disable 1998
        protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder)
        {
            __builder.AddMarkupContent(0, "<h1>Hello, world!</h1>\r\n\r\n");
            __builder.OpenComponent<BlazorApp3.Data.MinimumComponent>(1);
            __builder.AddComponentReferenceCapture(2, (__value) => {
#nullable restore
#line 5 "C:\Users\shaun\source\repos\BlazorApp3\BlazorApp3\Pages\Test.razor"
                       this.myComponent = (BlazorApp3.Data.MinimumComponent)__value;

#line default
#line hidden
#nullable disable
            }
            );
            __builder.CloseComponent();
        }
        #pragma warning restore 1998
#nullable restore
#line 7 "C:\Users\shaun\source\repos\BlazorApp3\BlazorApp3\Pages\Test.razor"
       
    private MinimumComponent myComponent;

#line default
#line hidden
#nullable disable
    }

这是我的设置的屏幕截图，显示了已编译的 Razor 文件的位置。

还有我的项目文件：

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
      <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
  </PropertyGroup>

</Project>