Blazor中能否将ElementRef属性设为JavaScript互操作返回值？

首先得明确：ElementRef根本不是用来存储JavaScript对象的容器。它的核心作用只是让Blazor能引用到DOM元素，当你尝试把CodeMirror实例返回给Blazor的ElementRef时，Blazor没办法正确持有这个复杂的JS对象，后续调用更新方法时，传递的element参数其实是null，这就是你看到Cannot read property 'getDoc' of null错误的原因。

咱们换个思路，用全局对象来存储CodeMirror实例，通过唯一ID来关联，Blazor只需要持有这个ID就能在JS里找到对应的实例进行操作，完全避开ElementRef的限制。

步骤1：调整JavaScript注册函数 #

在全局对象里用Map存储CodeMirror实例，用唯一ID作为索引：

// 全局存储CodeMirror实例的Map，防止实例丢失
window.codeMirrorInstances = new Map();

Blazor.registerFunction('BlazorExt.CodeMirrorSetupExt', (element) => {
    const instance = CodeMirror.fromTextArea(element, { 
        mode: 'application/ld+json', 
        matchBrackets: true, 
        autoCloseBrackets: true, 
        indentWithTabs: true, 
        lineNumbers: true, 
        autofocus: true, 
        styleActiveLine: true, 
        readOnly: false, 
        foldGutter: true, 
        height: 'auto', 
        width: 'auto', 
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'] 
    });
    // 生成唯一ID，用元素ID+时间戳保证唯一性
    const instanceId = `cm-${element.id}-${Date.now()}`;
    window.codeMirrorInstances.set(instanceId, instance);
    return instanceId; // 返回ID给Blazor持有
});

Blazor.registerFunction('BlazorExt.CodeMirrorUpdateExt', (instanceId, value) => {
    const instance = window.codeMirrorInstances.get(instanceId);
    if (instance) {
        instance.getDoc().setValue(value);
    } else {
        console.warn(`找不到ID为${instanceId}的CodeMirror实例`);
    }
});

// 可选：添加销毁函数，避免组件卸载后内存泄漏
Blazor.registerFunction('BlazorExt.CodeMirrorDestroyExt', (instanceId) => {
    const instance = window.codeMirrorInstances.get(instanceId);
    if (instance) {
        instance.toTextArea(); // 还原为原生textarea
        instance.destroy();
        window.codeMirrorInstances.delete(instanceId);
    }
});

步骤2：调整C#扩展方法 #

现在C#不再返回ElementRef，而是返回字符串类型的实例ID：

public static class CodeMirrorExtensions
{
    public static string CodeMirrorSetupExt(this ElementRef elementRef)
    {
        return RegisteredFunction.Invoke<string>("BlazorExt.CodeMirrorSetupExt", elementRef);
    }

    public static void CodeMirrorUpdateExt(this string instanceId, string value)
    {
        RegisteredFunction.Invoke<object>("BlazorExt.CodeMirrorUpdateExt", instanceId, value);
    }

    public static void CodeMirrorDestroyExt(this string instanceId)
    {
        RegisteredFunction.Invoke<object>("BlazorExt.CodeMirrorDestroyExt", instanceId);
    }
}

步骤3：组件中使用调整 #

把原来的ElementRef CodeMirror改成存储实例ID的字符串：

<textarea @ref="TextArea" id="my-cm-textarea"></textarea>

@code {
    ElementRef TextArea;
    string CodeMirrorInstanceId; // 存储实例ID而非ElementRef

    protected override void OnAfterRender()
    {
        // 只初始化一次
        if (CodeMirrorInstanceId == null)
        {
            CodeMirrorInstanceId = TextArea.CodeMirrorSetupExt();
        }
    }

    // 调用更新方法
    public void UpdateCodeContent(string newContent)
    {
        CodeMirrorInstanceId.CodeMirrorUpdateExt(newContent);
    }

    // 组件销毁时清理实例
    public void Dispose()
    {
        if (!string.IsNullOrEmpty(CodeMirrorInstanceId))
        {
            CodeMirrorInstanceId.CodeMirrorDestroyExt();
        }
    }
}

Blazor和JS互操作时，字符串类型的ID可以被正确传递，JS端通过ID从全局Map中取出真实的CodeMirror实例，就能正常调用getDoc().setValue()方法了。同时添加销毁函数可以避免组件卸载后CodeMirror实例残留导致的内存泄漏问题。

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