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

Question

我正在努力让它按照微软的文档工作。

下面的脚本代码在现有的React应用程序中非常有效，我正在尝试将该应用程序移植到Blazor。脚本加载并初始化，我可以看到Iframe被正确地加载到浏览器DOM中。然而，该脚本(苹果的mapkit.js脚本(在migrateStateTo函数中出现Attempted to assign to readonly property错误，试图设置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.rarzor

@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.jsp与JavaScript的严格模式不兼容。您必须改为以草率模式加载mapkit.js。

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

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