我将 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);
}
答案 0 :(得分:1)
这不是答案,而是一些信息,因为您显然想沿着这条路线走下去。
事实上,一个页面上可以有多个根组件。
添加具有唯一 ID 的额外 div:
....
<div id="app">Loading...</div>
<div id="app1">Loading...</div>
<div id="app2">Loading...</div>
<div id="app3">Loading...</div>
....
添加以下内容:
...
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");
...
App
@inherits LayoutComponentBase
@Body
所有的 id 都必须存在于启动页面中。每个人都可以注册一个管理服务并......