Reactjs 代码镜像在我的React应用程序中不起作用

我试图创建一个类似EclipseOrion的WebIDE。我计划使用的代码编辑器是代码镜像；唯一的困难是我无法加载代码编辑器。这是我遇到的错误

这是让我想到这个问题的代码

import React, { Component } from 'react';
import codemirror from 'codemirror';

import 'codemirror/mode/markdown/markdown';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/monokai.css';

class Editor extends Component {
  componentDidMount = () => {
    this.codeMirror = codemirror.fromTextArea(this.codeEditor, {
      mode: 'markdown'
    });
  };
  codeEditor = React.createRef();
  render = () => (
    <div>
      <textarea ref={this.codeEditor} />
    </div>
  );
}

export default Editor;

import React，{Component}来自'React'；
从“codemirror”导入codemirror；
导入“codemirror/mode/markdown/markdown”；
导入'codemirr/lib/codemirr.css'；
导入“codemirr/theme/monokai.css”；
类编辑器扩展组件{
componentDidMount=（）=>{
this.codeMirror=codeMirror.fromTextArea（this.codeEditor{
模式：“降价”
});
};
codeEditor=React.createRef（）；
渲染=（）=>(
);
}
导出默认编辑器；

---

这个问题在这里已经说过很多次了，但在我的情况下，没有任何解决方案是有意义的。提前谢谢

这段代码似乎起到了作用，这只是

ref

的一个问题

import React, { Component } from 'react';
import codemirror from 'codemirror';

import 'codemirror/mode/markdown/markdown';
import 'codemirror/lib/codemirror.css';

class Editor extends Component {
  componentDidMount = () => {
    this.codeMirror = codemirror(this.editor, {
      mode: 'markdown'
    });
  };
  ref = React.createRef();
  render = () => (
    <div>
      <div ref={self => this.editor = self} />
    </div>
  );
}

export default Editor;

import React，{Component}来自'React'；
从“codemirror”导入codemirror；
导入“codemirror/mode/markdown/markdown”；
导入'codemirr/lib/codemirr.css'；
类编辑器扩展组件{
componentDidMount=（）=>{
this.codemirr=codemirr（this.editor{
模式：“降价”
});
};
ref=React.createRef（）；
渲染=（）=>(
this.editor=self}/>
);
}
导出默认编辑器；