如何在Blazor中渲染包含组件的动态HTML片段？

Blazor本身没有内置的直接解析字符串中Blazor组件的功能，以下是几种实用的实现思路：

方案1：利用Razor动态编译服务 #

通过Razor编译服务将包含组件的HTML/Razor字符串编译为RenderFragment，这是最接近原生Razor体验的方式，但需注意安全风险。

步骤： #

1. 安装依赖包：Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation
2. 在Program.cs中注册编译服务：

builder.Services.AddRazorCompilation();

3. 编写编译工具类：

public class DynamicRazorCompiler
{
    private readonly RazorCompilationService _compilationService;

    public DynamicRazorCompiler(RazorCompilationService compilationService)
    {
        _compilationService = compilationService;
    }

    public async Task<RenderFragment> CompileAsync(string razorContent)
    {
        // 包裹成可编译的Razor模板格式
        var template = $"@{{ {razorContent} }}";
        var compileResult = await _compilationService.CompileAsync(template);
        return compileResult.CreateInstance().Render;
    }
}

4. 在组件中使用：

@inject DynamicRazorCompiler Compiler
@if (_dynamicContent != null)
{
    @_dynamicContent
}

@code {
    private RenderFragment _dynamicContent;
    // 从数据库获取的内容
    private string _dbHtml = "<div>Text <Component Attribute1=\"A1\" /></div>";

    protected override async Task OnInitializedAsync()
    {
        _dynamicContent = await Compiler.CompileAsync(_dbHtml);
    }
}

⚠️ 注意：此方法仅适用于可信来源的数据库内容，否则存在代码注入风险。

方案2：自定义组件解析器（结合HTML解析库） #

用HTML解析库（如AngleSharp）解析数据库中的HTML字符串，识别自定义Blazor组件标签，再手动通过RenderTreeBuilder渲染组件。这种方式更安全、可控。

步骤： #

1. 安装依赖包：AngleSharp
2. 编写自定义渲染组件：

@using AngleSharp.Dom
@using AngleSharp

<DynamicContentRenderer HtmlContent="@_dbHtml" />

@code {
    private string _dbHtml = "<div>Text <Component Attribute1=\"A1\" /></div>";
}

// 自定义渲染组件
public class DynamicContentRenderer : ComponentBase
{
    [Parameter] public string HtmlContent { get; set; }

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        var browsingContext = BrowsingContext.New(Configuration.Default);
        var document = browsingContext.OpenAsync(req => req.Content(HtmlContent)).Result;
        
        // 递归渲染DOM节点
        RenderDomNode(builder, document.Body.FirstChild);
    }

    private void RenderDomNode(RenderTreeBuilder builder, INode node)
    {
        if (node is IText textNode)
        {
            builder.AddContent(0, textNode.TextContent);
            return;
        }

        if (node is IElement element)
        {
            // 判断是否为Blazor组件（这里用标签首字母大写作为判断依据，可自定义规则）
            if (char.IsUpper(element.TagName[0]))
            {
                // 查找组件类型（需指定完整命名空间和程序集）
                var componentType = Type.GetType($"YourAppNamespace.{element.TagName}, YourAppAssembly");
                if (componentType != null)
                {
                    builder.OpenComponent(1, componentType);
                    // 添加组件属性
                    foreach (var attr in element.Attributes)
                    {
                        builder.AddAttribute(2, attr.Name, attr.Value);
                    }
                    builder.CloseComponent();
                }
            }
            else
            {
                // 渲染普通HTML元素
                builder.OpenElement(3, element.TagName.ToLower());
                foreach (var attr in element.Attributes)
                {
                    builder.AddAttribute(4, attr.Name, attr.Value);
                }
                // 递归渲染子元素
                foreach (var child in element.Children)
                {
                    RenderDomNode(builder, child);
                }
                builder.CloseElement();
            }
        }
    }
}

方案3：简化版正则替换+DynamicComponent #

如果你的组件结构简单，也可以用正则匹配组件标签，提取组件名和属性，再用Blazor内置的DynamicComponent渲染：

@if (_componentsWithParams != null)
{
    <div>
        @foreach (var item in _componentsWithParams)
        {
            <DynamicComponent Type="@item.ComponentType" Parameters="@item.Parameters" />
        }
    </div>
}

@code {
    private List<(Type ComponentType, Dictionary<string, object> Parameters)> _componentsWithParams;
    private string _dbHtml = "<div>Text <Component Attribute1=\"A1\" /></div>";

    protected override void OnInitialized()
    {
        _componentsWithParams = new List<(Type, Dictionary<string, object>)>();
        var componentRegex = new Regex(@"<(\w+)([^>]*)/>");
        var matches = componentRegex.Matches(_dbHtml);

        foreach (Match match in matches)
        {
            var componentName = match.Groups[1].Value;
            var attrStr = match.Groups[2].Value;
            
            // 解析属性
            var attrRegex = new Regex(@"(\w+)\s*=\s*""([^""]*)""");
            var parameters = attrRegex.Matches(attrStr)
                .ToDictionary(m => m.Groups[1].Value, m => (object)m.Groups[2].Value);
            
            // 获取组件类型
            var componentType = Type.GetType($"YourAppNamespace.{componentName}, YourAppAssembly");
            if (componentType != null)
            {
                _componentsWithParams.Add((componentType, parameters));
            }
        }
    }
}

通用注意事项 #

• 性能优化：对频繁使用的动态内容，缓存编译后的RenderFragment或解析结果，避免重复处理。
• 组件类型查找：确保组件的完整命名空间和程序集名正确，否则无法加载组件类型。
• 安全防护：所有来自不可信来源的动态内容，必须先过滤危险标签和属性，避免XSS或代码注入。

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