javascript - Blazor 调用构建 UI 的 JSInterop 脚本无法正确呈现

Question

我试图让它按照微软的文档工作。

下面的脚本代码在现有的 React 应用程序中完美运行，我正在尝试将该应用程序移植到 Blazor。脚本加载并初始化 - 我可以看到 Iframe 已正确加载到浏览器 DOM 中。然而，脚本（Apple 的 mapkit.js 脚本）Attempted to assign to readonly property在migrateStateTo函数中出错，试图设置t.tint = this.node.tint.

MapkitHelper.js

import "https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js";

export function initialiseMapkit(token, element) {
  // this call seems to work
  mapkit.init({
    authorizationCallback: function(done) {
      done(token)
    }  
  })
  // from here on things seem to go south no matter what I do
  var map = new mapkit.Map(element)
}

MapkitRenderer.razor

@implements IAsyncDisposable
@inject IJSRuntime JS

<div @ref="mapkitElement"></div>

@code {
  public string? token = Environment.GetEnvironmentVariable("MAPKIT_JS_TOKEN");

  private ElementReference mapkitElement;
  private IJSObjectReference? mapModule;

  protected override async Task OnAfterRenderAsync(bool firstRender) {
    if (firstRender) {
      mapModule = await JS.InvokeAsync<IJSObjectReference>("import", "./MapkitHelper.js");
      await mapModule.InvokeVoidAsync("initialiseMapkit", token, mapkitElement);
    }
  }

  async ValueTask IAsyncDisposable.DisposeAsync() {
    if (mapModule is not null) {
      await mapModule.DisposeAsync();
    }
  }
}