如何通过代码将Blazor组件动态添加到页面body或指定DOM容器中

Blazor 是声明式渲染框架，无法直接像 jQuery 一样实例化组件后插入 DOM，以下是符合框架设计的实现方式：

方案1：渲染到指定div容器（最常用） #

首先在页面声明渲染容器和组件参数集合，点击按钮时往集合里追加参数，触发框架自动渲染新组件：

<!-- 页面Razor部分 -->
<!-- 目标插入容器 -->
<div id="div1">
    @foreach (var opt in CompParams)
    {
        <MyComp Opt="opt" />
    }
</div>

<button @onclick="buttonClick">添加MyComp组件</button>

@code {
    // 存储所有要渲染的MyComp组件的Opt参数
    private List<MyOpt> CompParams { get; set; } = new();

    private async Task buttonClick()
    {
        // 构造组件参数，不需要手动new组件实例
        var newOpt = new MyOpt { 
            // 此处给Opt属性赋值
        };
        CompParams.Add(newOpt);
        
        // 非异步场景需手动调用触发重渲染，异步方法可省略
        StateHasChanged();
    }
}

这种方式性能最优，也天然支持后续对已插入组件做修改、删除等操作。

方案2：多类型组件动态渲染 #

如果需要动态插入的组件类型不固定，可使用Blazor内置的DynamicComponent实现：

<div id="div1">
    @foreach (var config in CompConfigList)
    {
        <DynamicComponent Type="config.ComponentType" Parameters="config.Params" />
    }
</div>

@code {
    private List<DynamicCompConfig> CompConfigList { get; set; } = new();

    private async Task buttonClick()
    {
        CompConfigList.Add(new DynamicCompConfig
        {
            ComponentType = typeof(MyComp),
            Params = new Dictionary<string, object>
            {
                { nameof(MyComp.Opt), new MyOpt { /* 赋值 */ } }
            }
        });
        StateHasChanged();
    }

    public class DynamicCompConfig
    {
        public Type ComponentType { get; set; }
        public Dictionary<string, object> Params { get; set; }
    }
}

方案3：渲染到全局body节点 #

如果需要把组件挂载到body下（不受当前组件样式、层级限制，适合弹窗、提示框等全局组件），可结合JS互操作实现：

1. 先通过JS在body下创建挂载节点
2. 把组件渲染片段绑定到该节点即可

重要提示：不要手动new MyComp()创建组件实例，Blazor组件实例由框架渲染管线统一管理，手动创建的实例无法正常完成渲染、生命周期触发等逻辑。

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