Code Mirror не будет работать в моем приложении React - PullRequest
0 голосов
/ 12 июня 2018

Я пытаюсь создать Web IDE вроде Eclipse Orion.Редактор кода, который я планирую использовать, - это Code Mirror;единственная трудность в том, что я не могу загрузить редактор кода.Вот ошибка, с которой я сталкиваюсь.

screenshot of devtools

Вот код, который привел меня к этой проблеме.

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;

Эта проблема была заявлена ​​здесь много раз, но без решения, имеющего смысл в моей ситуации.Заранее спасибо.

1 Ответ

0 голосов
/ 12 июня 2018

Этот код, похоже, сработал, это была просто проблема с 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;
...