通过WebAssembly在JS中调用C#方法：React对接Blazor WASM非静态方法问题

方案1：基于现有Blazor WASM架构实现非静态方法调用 #

你遇到的IJSRuntime注入问题是因为没有从Blazor WASM的宿主容器直接获取实例，不需要依赖Blazor组件的注入逻辑，按以下步骤调整即可：

• 在Blazor项目的Program.cs中，完成宿主构建后直接从服务容器取出IJSRuntime，将需要调用的C#实例挂载到JS全局对象：

using Microsoft.JSInterop;
using YourExistingMathLibrary; // 你的原有C#计算库命名空间

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
var host = builder.Build();

// 直接从容器获取IJSRuntime实例，无需组件注入
var jsRuntime = host.Services.GetRequiredService<IJSRuntime>();
// 实例化你的非静态计算类
var mathLogicInstance = new ComplexMathLogic();
// 将实例引用推送到JS全局上下文
await jsRuntime.InvokeVoidAsync("window.setCsharpInstance", DotNetObjectReference.Create(mathLogicInstance));

await host.RunAsync();

• 在React项目的public/index.html中添加全局方法接收C#实例：

// 全局存储C#实例引用
window._csharpInstance = null;
window.setCsharpInstance = (instanceRef) => {
  window._csharpInstance = instanceRef;
};

• 在React业务代码中直接调用非静态方法，注意需要给C#中要调用的方法添加[JSInvokable]特性：

// 调用C#非静态方法Compute，传入参数
const computeResult = await window._csharpInstance.invokeMethodAsync('Compute', param1, param2);

方案2：更优轻量方案（无Blazor冗余负载） #

如果你不需要Blazor的UI能力，仅需要调用C#逻辑，建议使用原生.NET WASM绑定，比完整Blazor项目减少约40%的打包体积，启动速度提升30%以上：

• 使用dotnet new wasmbrowser命令创建空的WASM类库项目，直接引入你的现有C#计算代码
• 给所有需要暴露给JS的方法添加[JSInvokable]特性，支持静态、非静态方法
• 编译项目后将生成的_framework文件夹复制到React的public目录，直接通过官方dotnet.js加载runtime，加载完成后即可直接调用所有暴露的C#方法，无需处理IJSRuntime相关逻辑

通用避坑提示 #

• 所有暴露给JS调用的C#方法，参数和返回值必须是可JSON序列化的类型，否则会触发序列化异常
• 不再使用的C#实例引用需要手动调用dispose()方法释放，避免WASM内存泄漏
• CPU密集型计算建议放到Web Worker中运行，避免阻塞React主线程渲染

内容的提问来源于stack exchange，提问作者Drew705