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

Question

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

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

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

    private MudForm _Form;
}

我想重新实现 blazor 代码，参考MudForm使用RenderTreeBuilder. 因此我已经尝试过以下方法，但它对我不起作用：

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方法是否正确_Form使用RenderTreeBuilder. 有人可以帮我解决这个问题吗？

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 编译器生成的代码：

@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
    }