我的摩纳哥编辑器实例无法更新

Question

问题：

我正在尝试将 monaco-editor/react 集成到我的 Web 应用程序中并已成功加载它，但每当我在前端更改它时都会遇到错误。

一切正常，直到我以任何方式修改我的 editor 实例（即添加文本、调整大小等）

我正在使用的 Web 应用程序 Grafana，每当我与编辑器交互时都会出现此错误

我的错误：

我的代码：

import Editor from '@monaco-editor/react';
...

interface MonacoEditorProps {
  value: string;
  theme: string;
  language: string;
  onChange: (value?: string | undefined) => void;
}
class MonacoEditor extends React.PureComponent<MonacoEditorProps> {
  getEditorValue: any | undefined;
  editorInstance: any | undefined;

  onSourceChange = () => {
    this.props.onChange(this.getEditorValue());
  };
  onEditorDidMount = (getEditorValue: any, editorInstance: any) => {
    this.getEditorValue = getEditorValue;
    this.editorInstance = editorInstance;
  };
  updateDimensions() {
    this.editorInstance.layout();
  }
  render() {
    const source = this.props.value;
    if (this.editorInstance) {
      this.editorInstance.layout();
    }
    return (
      <div onBlur={this.onSourceChange}>
        <Editor
          height={'33vh'}
          language={this.props.language}
          theme={this.props.theme}
          value={source}
          onMount={this.onEditorDidMount}
        />
      </div>
    );
  }
}

不要认为我偏离了 editor instance docs 太多。有谁知道我是如何错误地更新我的编辑器的？

Answer 1

我不知道为什么 onMount 仍然可用，但我已经使用 React 组件的正常 componentDidMount 方法进行布局，并为实际的编辑器实例使用了 ref。这非常有效：

    private editorRef = React.createRef<Editor>();

...

                <Editor
                    ref={this.editorRef}
                    language={language}
                    options={opts}
                />

和

    public componentDidMount(): void {
        this.editorRef.current?.editor?.layout();
        if (autofocus) {
            this.editorRef.current?.editor?.focus();
        }
    }

我的摩纳哥编辑器实例无法更新

My monaco editor instance fails to update

reactjs

grafana

monaco-editor

问题：

我的错误：

我的代码：