将 Blazor 组件渲染到现有的 div（Blazor 无法访问）

Question

我将 Blazor Server 与 React 应用程序一起用于布局部分。

当 Blazor 启动时，它会调用 JSInterop 来启动一个 React 组件。 React 组件基本上在其布局中创建了一大堆元素（这些元素的 id 通过初始调用提供）。

我的问题是如何告诉 Blazor 将组件渲染到那些 div 占位符中？

我能找到的主题似乎总是在 Blazor 中提供容器的 html 代码（然后使用 renderfragment）。但在这种情况下，我只有占位符 id - Blazor 中不知道实际元素。

在代码下面（这里没有使用 react 库，而是在 JS 中创建了一个 div 以便它是一个更清晰的示例）。主要问题是围绕在 JS 呈现 div 后调用的 ***-部分 - 我如何告诉 Blazor 确认该 div 元素，或告诉 Blazor 找到它，并将组件渲染到其中？

Index.razor

@page "/"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Config
@inject IJSRuntime Jsr
@implements IDisposable

<div></div>

@code {

    private DotNetObjectReference<Index> objectReference;

    [JSInvokable]
    public void SuccessRender(object successrendermessage)
    {
        // ***Here is where it should call the render function.***
    }

    public override Task SetParametersAsync(ParameterView parameters)
    {
        objectReference = DotNetObjectReference.Create(this);
        return base.SetParametersAsync(parameters);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Jsr.InvokeVoidAsync("Library.CreateDiv", "uuid1", objectReference);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    public void Dispose()
    {
        objectReference?.Dispose();
    }
    
}

这是JS代码：

export function CreateDiv(id, dotNetObj) {
$("body").append("<div id='" + id + "'></div>");
dotNetObj.invokeMethodAsync('SuccessRender', true);
}

Answer 1

<块引用>

这不是答案，而是一些信息，因为您显然想沿着这条路线走下去。

事实上，一个页面上可以有多个根组件。

index.html

添加具有唯一 ID 的额外 div：

....
    <div id="app">Loading...</div>

    <div id="app1">Loading...</div>

    <div id="app2">Loading...</div>

    <div id="app3">Loading...</div>
....

程序.cs

添加以下内容：

...
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<App>("#app");
    builder.RootComponents.Add<SurveyPrompt>("#app1");
    builder.RootComponents.Add<SurveyPrompt>("#app2");
    builder.RootComponents.Add<SurveyPrompt>("#app3");
...

MainLayout.razor（或您自己的自定义布局设置）由第一个组件 App

使用

@inherits LayoutComponentBase
@Body

启动它，你应该得到这个：

所有的 id 都必须存在于启动页面中。每个人都可以注册一个管理服务并......