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

Question

我正在尝试创建类似Eclipse Orion的Web IDE。我计划使用的代码编辑器是Code Mirror;唯一的困难是我无法加载代码编辑器。这是我遇到的错误。

这是让我解决这个问题的代码。

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;

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

Answer 1

此代码似乎可以解决问题，这只是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;