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

Posted 2023-03-07

【中文标题】代码镜像在我的 React 应用程序中不起作用

【英文标题】：Code Mirror will not function in my React application

【发布时间】：2018-11-22 07:58:19

【问题描述】：

我正在尝试创建一个类似于 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;

此问题已在此处多次说明，但在我的情况下没有任何解决方案。提前致谢。

【参考方案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;