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

Question

我正试图让它按照 Microsoft's documentation 工作.

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

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();
    }
  }
}

Answer 1

我遇到这个问题是因为我将 mapkit.js 作为模块加载。

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

将 mapkit.js 作为模块加载会导致异常，因为 mapkit.js 与 JavaScript 的严格模式不兼容。您必须改为以草率模式加载 mapkit.js。

<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"></script>

基于 https://developer.apple.com/forums/thread/706389