Blazor Server可复用组件多实例下JS Interop调用失效问题排查

你遇到的核心问题是JS端用静态变量存储DotNetObjectReference——每次组件实例化时，新的引用会覆盖静态变量里的旧引用，导致只有最后一个组件实例的引用被保留，前面的实例引用完全丢失，自然无法响应事件。

给每个组件实例分配唯一标识，JS端用键值对映射表替代静态变量，把每个实例的唯一ID和对应的DotNetObjectReference关联起来，确保每个实例的引用都能被独立存储和调用。

1. Blazor组件端改造 #

给组件添加唯一ID，实现IAsyncDisposable清理资源，注册组件时把ID和引用一起传给JS：

@implements IAsyncDisposable
@inject IJSRuntime JSRuntime

<!-- 给根元素加data属性存储实例ID，方便JS定位 -->
<div @ref="ComponentRoot" data-instance-id="@InstanceId">
    <!-- 你的组件内容 -->
</div>

@code {
    // 生成唯一实例ID
    private Guid InstanceId { get; } = Guid.NewGuid();
    private ElementReference ComponentRoot { get; set; }
    private DotNetObjectReference<YourComponentName>? _dotNetRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            _dotNetRef = DotNetObjectReference.Create(this);
            // 注册组件到JS，传入实例ID和.NET引用
            await JSRuntime.InvokeVoidAsync("componentUtils.registerInstance", InstanceId, _dotNetRef);
        }
    }

    // JS调用的方法，执行隐藏操作
    [JSInvokable]
    public void CancelAutocomplete()
    {
        // 这里写你的内容隐藏逻辑
        // 比如：IsVisible = false; StateHasChanged();
    }

    // 销毁组件时清理JS端资源
    public async ValueTask DisposeAsync()
    {
        if (_dotNetRef != null)
        {
            await JSRuntime.InvokeVoidAsync("componentUtils.unregisterInstance", InstanceId);
            _dotNetRef.Dispose();
        }
    }
}

2. JS端改造 #

用对象存储多个实例的引用，给每个组件的DOM元素单独绑定事件，确保触发时能找到对应实例：

window.componentUtils = {
    // 键值对存储：实例ID -> DotNetObjectReference
    instanceReferences: {},

    registerInstance: function(instanceId, dotNetRef) {
        this.instanceReferences[instanceId] = dotNetRef;
        // 获取当前组件的根元素，绑定custom-clear-click事件
        const element = document.querySelector(`[data-instance-id="${instanceId}"]`);
        if (element) {
            // 绑定事件时指定当前实例ID，确保回调能找到对应引用
            element.addEventListener('custom-clear-click', () => this.handleClearClick(instanceId));
        }
    },

    handleClearClick: function(instanceId) {
        const ref = this.instanceReferences[instanceId];
        if (ref) {
            // 调用Blazor组件的CancelAutocomplete方法
            ref.invokeMethodAsync('CancelAutocomplete');
        }
    },

    unregisterInstance: function(instanceId) {
        // 移除事件监听
        const element = document.querySelector(`[data-instance-id="${instanceId}"]`);
        if (element) {
            element.removeEventListener('custom-clear-click', () => this.handleClearClick(instanceId));
        }
        // 从映射表删除引用，释放内存
        delete this.instanceReferences[instanceId];
    }
};

• 事件绑定要绑定到每个组件的独立DOM元素，不要用全局事件（如果第三方库是全局触发事件，需要从事件源的DOM元素上读取data-instance-id来找到对应实例）
• 必须实现IAsyncDisposable，销毁时清理JS端的事件监听和引用，避免内存泄漏
• 如果第三方库的事件触发时没有关联到组件DOM元素，可以在组件初始化时给第三方库的回调传入实例ID，确保事件能定位到对应组件

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