Blazor中如何修改BuildRenderTree让自定义EditForm向子组件级联自身实例

你只需要在原有的CascadingValue<EditContext>外层嵌套一层CascadingValue<CustomForm>，将当前组件实例作为值传递即可，修改后的代码如下：

protected override void BuildRenderTree(RenderTreeBuilder builder)
{
    Debug.Assert(EditContext != null);

    // If _editContext changes, tear down and recreate all descendants.
    // This is so we can safely use the IsFixed optimization on CascadingValue,
    // optimizing for the common case where _editContext never changes.
    builder.OpenRegion(EditContext.GetHashCode());

    builder.OpenElement(0, "form");
    builder.AddMultipleAttributes(1, AdditionalAttributes);
    builder.AddAttribute(2, "onsubmit", _handleSubmitDelegate);
    
    // 新增外层级联传递CustomForm自身实例
    builder.OpenComponent<CascadingValue<CustomForm>>(3);
    builder.AddAttribute(4, "IsFixed", true);
    builder.AddAttribute(5, "Value", this);
        // 原有EditContext级联逻辑，序列号对应往后顺延
        builder.AddAttribute(6, "ChildContent", (RenderFragment)(builder2 =>
        {
            builder2.OpenComponent<CascadingValue<EditContext>>(0);
            builder2.AddAttribute(1, "IsFixed", true);
            builder2.AddAttribute(2, "Value", EditContext);
            builder2.AddAttribute(3, "ChildContent", ChildContent?.Invoke(EditContext));
            builder2.CloseComponent();
        }));
    builder.CloseComponent();
    
    builder.CloseElement();
    builder.CloseRegion();
}

注意说明 #

• 嵌套的级联值会同时向下传递，既保留了原生EditForm的EditContext级联逻辑，也新增了CustomForm实例的级联传递，子组件可以按你定义的[CascadingParameter] public CustomForm Form { get; set; }正常接收
• IsFixed设为true是因为CustomForm实例在组件生命周期内不会变更，可以优化渲染性能
• RenderTree的序列号需要按层级调整，避免同层级序列号重复导致渲染异常

内容的提问来源于stack exchange，提问作者Samo