Blazor：使用通用RenderFragment实现多步骤表单模板

你的方案完全可行，先解决RenderFragment的赋值与渲染问题 #

1. 正确为RenderFragment类型的FormToRender赋值 #

你可以通过Lambda表达式直接包裹组件标记（更简洁常用），或使用RenderTreeBuilder手动构建，示例如下：

先定义StepModel类：

public class StepModel
{
    public string Title { get; set; }
    public RenderFragment FormToRender { get; set; }
    // 可按需添加其他属性：步骤编号、是否可跳过等
}

创建步骤列表时，直接用lambda为FormToRender赋值：

private List<StepModel> _steps = new List<StepModel>
{
    new StepModel
    {
        Title = "第一步：基本信息",
        FormToRender = () => <FormStep1 />
    },
    new StepModel
    {
        Title = "第二步：详细设置",
        FormToRender = () => <FormStep2 />
    }
};

2. 在表单容器中直接渲染RenderFragment #

在容器组件的Razor代码里，只需引用当前步骤的FormToRender属性即可完成渲染：

<div class="step-container">
    <h3>@_currentStep.Title</h3>
    <!-- 直接渲染当前步骤的表单组件 -->
    @_currentStep.FormToRender

    <div class="navigation-buttons">
        <button disabled="@(_currentStepIndex == 0)" @onclick="GoPrevious">上一步</button>
        <button disabled="@(_currentStepIndex == _steps.Count - 1)" @onclick="GoNext">下一步</button>
    </div>
</div>

@code {
    private List<StepModel> _steps;
    private int _currentStepIndex = 0;
    private StepModel _currentStep => _steps[_currentStepIndex];

    protected override void OnInitialized()
    {
        // 初始化步骤列表
        _steps = new List<StepModel>
        {
            new StepModel { Title = "基本信息", FormToRender = () => <FormStep1 /> },
            new StepModel { Title = "详细设置", FormToRender = () => <FormStep2 /> },
            new StepModel { Title = "确认提交", FormToRender = () => <FormStep3 /> }
        };
    }

    private void GoPrevious()
    {
        if (_currentStepIndex > 0) _currentStepIndex--;
    }

    private void GoNext()
    {
        if (_currentStepIndex < _steps.Count - 1) _currentStepIndex++;
    }
}

更优思路：用DynamicComponent实现灵活的步骤管理 #

如果你的步骤表单需要传递参数，或希望步骤配置更易维护（比如从配置加载），可以改用存储组件类型+参数字典的方式，替代直接存储RenderFragment：

1. 修改StepModel定义 #

public class StepModel
{
    public string Title { get; set; }
    public Type ComponentType { get; set; }
    public Dictionary<string, object> ComponentParameters { get; set; } = new();
}

2. 初始化步骤列表 #

_steps = new List<StepModel>
{
    new StepModel
    {
        Title = "基本信息",
        ComponentType = typeof(FormStep1),
        ComponentParameters = new Dictionary<string, object>
        {
            { "UserId", 123 }, // 传递组件所需参数
            { "OnInfoSaved", EventCallback.Factory.Create(this, HandleInfoSaved) }
        }
    },
    new StepModel
    {
        Title = "详细设置",
        ComponentType = typeof(FormStep2)
    }
};

3. 在容器中用DynamicComponent渲染 #

<div class="step-container">
    <h3>@_currentStep.Title</h3>
    <DynamicComponent Type="@_currentStep.ComponentType" Parameters="@_currentStep.ComponentParameters" />

    <!-- 导航按钮逻辑同上 -->
</div>

这种方式的优势：

• 无需硬编码RenderFragment，组件参数传递更清晰
• 支持动态加载组件类型（比如从数据库/配置读取）
• 步骤配置与组件实现解耦，更易扩展和维护

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