在用户内容中定位 Blazor 组件

Question

我需要动态地将 Blazor 组件放入用户提供的内容中。本质上，该组件应该使用一些 UI 元素来扩展用户提供的标记。

假设用户提供了一些可以在其中包含“greeting-container”元素的内容，并且组件应该在该元素中插入一个问候按钮。

我当前的解决方案是调用 JavaScript 函数来移动 OnAfterRenderAsync 中的 DOM 元素（完整代码如下）。它似乎工作正常，但在 Blazor 中似乎不鼓励操作 DOM 元素，因为它会影响差异算法。所以我对此有几个问题：

1. 像这样移动 DOM 元素有多糟糕？它是否会导致性能问题、功能问题或一些未定义的行为？
2. 有没有更好的方法可以在不使用 JavaScript 的情况下实现相同的结果？我正在考虑为此使用RenderTreeBuilder，但似乎它可能不是为此目的而设计的，因为建议使用硬编码的序列号，这在处理编译时未知的动态内容时似乎是不可能的。

当前解决方案代码：

Greeter.razor

@page "/greeter"

@inject IJSRuntime JSRuntime;

<div>
    @((MarkupString)UserContentMarkup)
    <div id="greeting">
        <button @onclick="ToggleGreeting">Toggle greeting</button>
        @if (isGreetingVisible) {
            <p>Hello, @Name!</p>
        }
    </div>
</div>

@code {
    [Parameter]
    public string UserContentMarkup { get; set; }

    [Parameter]
    public string Name { get; set; }

    private bool isGreetingVisible;

    private void ToggleGreeting()
    {
        isGreetingVisible = !isGreetingVisible;
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JSRuntime.InvokeVoidAsync("moveGreetingToContainer");
    }
}

_Host.cshtml

window.moveGreetingToContainer = () => {
    var greeting = document.getElementById("greeting");

    var container = document.getElementById("greeting-container");

    container.appendChild(greeting);
}

UserContentTest.razor

@page "/userContentTest"

@inject IJSRuntime JSRuntime;

<h3>Testing user content</h3>

<Greeter UserContentMarkup=@userContentMarkup Name="John"></Greeter>

@code {
    private string userContentMarkup = "Some <b>HTML</b> text followed by greeting <div id='greeting-container'></div> and <i>more</i> text";
}

预期结果（点击“切换问候语”后）：

<div>
    Some <b>HTML</b> text followed by greeting
    <div id="greeting-container">
        <div id="greeting">            
            <button>Toggle greeting</button>            
            <p>Hello, John!</p>            
        </div>
    </div> and <i>more</i> text    
</div>

Answer 1

很好的问题 - 是的，使用 JS 移动 dom 元素非常糟糕，因为 Blazor 看不到您对 dom 所做的更改。

您可以做的是切换到使用RenderFragment，更具体地说是RenderFragment<RenderFragment>，这是一个将提供更多标记作为参数的标记。

在第二行，我正在调用 UserContentMarkup 方法（这是一个RenderFragment<RenderFragment>）并将<div id=greeting> 内容作为context 参数传入。

注意：它包含在 <text> 元素中，这实际上是一种将 HTML 嵌入到 Razor 文件中的 C# 中的方法。它不会向页面呈现<text> 元素。

Greeter.razor

<div>
    @UserContentMarkup(
    @<text>
        <div id="greeting">
            <button @onclick="ToggleGreeting">Toggle greeting</button>
            @if (isGreetingVisible) {
                <p>Hello, @Name!</p>
            }
        </div>
    </text>
    )
</div>

@code {
    [Parameter]
    public RenderFragment<RenderFragment> UserContentMarkup { get; set; }

    [Parameter]
    public string Name { get; set; }

    private bool isGreetingVisible;

    private void ToggleGreeting()
    {
        isGreetingVisible = !isGreetingVisible;
    }
}

UserContentTest.razor

在这里您可以看到两种使用 Greeter 的方法 - 在页面中使用标记，或者使用 code 方法。

<h3>Testing user content</h3>

@* Using markup to supply user content - @context is where the button goes *@
<Greeter Name="John">
    <UserContentMarkup>
        Some <b>HTML</b> text followed by greeting 
        <div id='greeting-container'>@context</div> and <i>more</i> text
    </UserContentMarkup>
</Greeter>

@* Using a method to supply the user content - @context is where the button goes *@
<Greeter Name="John" UserContentMarkup=@userContent />

这个code 方法可能会令人困惑——它是一个RenderFragment<RenderFragment>，这意味着它必须是一个接受RenderFragment 作为其唯一参数并返回一个RenderFragment 的方法——返回的是RenderFragment在这种情况下，标记包裹在 <text> 中，以明确它是标记。

@code
{
    RenderFragment<RenderFragment> userContent 
        => context => @<text>Some stuff @context more stuff</text>;
}

在这里试试：https://blazorrepl.com/repl/QuPPaMEu34yA5KSl40