如何让自定义Razor组件支持HTML内配置设置？相关疑问

1. 设置类是否必须继承ComponentBase？ #

必须继承。如果要支持开发者以<EditSettings ... />这种子组件的语法在Razor模板里声明配置，这些设置类就得继承ComponentBase——因为Blazor仅将继承该类的类型识别为可渲染的组件。

如果不想让设置类继承ComponentBase，只能通过父组件参数传递配置类实例，但这样就无法实现示例中的子组件声明写法了。所以要满足需求的话，继承ComponentBase是必要条件。

2. 如何在MyComponent中捕获可选的设置子组件？ #

可以通过组件引用捕获或遍历子组件的方式实现，以下是具体步骤：

步骤1：定义设置子组件 #

以EditSettings为例，继承ComponentBase并声明配置参数：

public class EditSettings : ComponentBase
{
    [Parameter]
    public bool AllowEdit { get; set; } = true; // 默认值

    [Parameter]
    public EditMode EditMode { get; set; } = EditMode.Row;

    [Parameter]
    public EventCallback<EditEventArgs> OnEditCompleted { get; set; }

    // 暴露方法给父组件获取最终配置
    public EditSettingsModel GetConfig()
    {
        return new EditSettingsModel
        {
            AllowEdit = AllowEdit,
            EditMode = EditMode,
            OnEditCompleted = OnEditCompleted
        };
    }
}

// 纯数据类，用于存储配置值
public class EditSettingsModel
{
    public bool AllowEdit { get; set; }
    public EditMode EditMode { get; set; }
    public EventCallback<EditEventArgs> OnEditCompleted { get; set; }
}

步骤2：在MyComponent中捕获子组件 #

方式一：通过组件引用捕获

在MyComponent中直接捕获子组件的引用，再获取配置：

public class MyComponent : ComponentBase
{
    private EditSettings _userEditSettings;
    private SelectionSettings _userSelectionSettings;

    // 默认配置
    private readonly EditSettingsModel _defaultEditConfig = new()
    {
        AllowEdit = true,
        EditMode = EditMode.Row
    };

    private readonly SelectionSettingsModel _defaultSelectionConfig = new()
    {
        SelectionMode = SelectionMode.Single
    };

    protected override void OnInitialized()
    {
        // 优先使用用户配置，否则用默认值
        var finalEditConfig = _userEditSettings?.GetConfig() ?? _defaultEditConfig;
        var finalSelectionConfig = _userSelectionSettings?.GetConfig() ?? _defaultSelectionConfig;

        // 将配置应用到数据网格逻辑中
    }
}

对应的MyComponent.razor模板里，需要为子组件添加引用捕获：

@* MyComponent.razor *@
<div class="data-grid">
    @* 渲染用户传入的子组件并捕获引用 *@
    @if (ChildContent != null)
    {
        <CascadingValue Value="this">
            @ChildContent
        </CascadingValue>
    }
</div>

@code {
    // 提供方法让子组件注册自身
    public void RegisterEditSettings(EditSettings settings)
    {
        _userEditSettings = settings;
        StateHasChanged();
    }

    public void RegisterSelectionSettings(SelectionSettings settings)
    {
        _userSelectionSettings = settings;
        StateHasChanged();
    }
}

然后在EditSettings的OnInitialized中调用注册方法：

public class EditSettings : ComponentBase
{
    [CascadingParameter]
    public MyComponent ParentGrid { get; set; }

    protected override void OnInitialized()
    {
        ParentGrid?.RegisterEditSettings(this);
    }
}

方式二：遍历子组件收集

通过RenderTree遍历ChildContent，筛选出目标类型的子组件：

using Microsoft.AspNetCore.Components.Rendering;

public class MyComponent : ComponentBase
{
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    private EditSettingsModel _finalEditConfig;
    private SelectionSettingsModel _finalSelectionConfig;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 收集所有EditSettings类型的子组件
            var editSettings = GetChildComponents<EditSettings>().FirstOrDefault();
            var selectionSettings = GetChildComponents<SelectionSettings>().FirstOrDefault();

            _finalEditConfig = editSettings?.GetConfig() ?? new EditSettingsModel();
            _finalSelectionConfig = selectionSettings?.GetConfig() ?? new SelectionSettingsModel();

            StateHasChanged();
        }
    }

    private IEnumerable<T> GetChildComponents<T>() where T : ComponentBase
    {
        var components = new List<T>();
        var builder = new RenderTreeBuilder();
        ChildContent?.Invoke(builder);

        // 遍历RenderTree节点，筛选目标类型组件
        for (int i = 0; i < builder.GetFrames().Count; i++)
        {
            var frame = builder.GetFrames()[i];
            if (frame.FrameType == RenderTreeFrameType.Component && frame.ComponentType == typeof(T))
            {
                components.Add((T)frame.ComponentInstance);
            }
        }
        return components;
    }
}

关键注意事项 #

• 用户未声明子组件时，自动使用预设的默认配置
• 如果用户声明多个同类型子组件，需要添加冲突处理逻辑（如取第一个实例或抛出警告）
• 子组件参数变更时，要通知父组件更新配置，可通过子组件的OnParametersSetAsync触发父组件的状态更新

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