时间戳

首页 > 解决方案 > 将 Blazor 组件渲染到现有 div（Blazor 无权访问）

c# - 将 Blazor 组件渲染到现有 div（Blazor 无权访问）

问题描述

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

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

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

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

在代码下方（此处不使用 react 库，而是在 JS 中创建一个 div 以便它是一个更简洁的示例）。主要问题是在 JS 呈现 div 后调用的 *** 部分 - 我如何告诉 Blazor 确认该 div 元素，或者告诉 Blazor 找到它，并将组件呈现到其中？

索引.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);
}

标签： c#blazorblazor-server-side

解决方案

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

实际上，您可以在一个页面上拥有多个根组件。

索引.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 都必须存在于启动页面中。每个人都可以注册管理服务并......

推荐阅读