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

【问题标题】：My monaco editor instance fails to update我的摩纳哥编辑器实例无法更新
【发布时间】：2021-08-18 16:33:50
【问题描述】：

问题：

我正在尝试将 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 太多。有谁知道我如何错误地更新我的编辑器？

【问题讨论】：

标签： reactjs grafana monaco-editor

【解决方案1】：

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

    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();
        }
    }

【讨论】：