javascript - Monaco Editor 不会显示在 react 应用程序中

Question

我开始使用react-monaco-editor库，因为我想在我的Web React应用程序中添加一个很酷的json编辑器。

我按照github上的说明进行操作:react-monaco-editor-DOC

但似乎我遗漏了一些可能在 webpack 设置的 DOC 中未共享的内容。使用文档中的 webpack 设置说明后，导入库并添加以下行:

import MonacoEditor from 'react-monaco-editor';

class Editor extends React.Component{

  editorDidMount(editor, monaco) {
    console.log('editorDidMount', editor);
    editor.focus();
  }

  render(){	
    const options = {
      selectOnLineNumbers: true
    };

    return(
      <div>
        <MonacoEditor
         width="800"
         height="600"
         language="json"
         value="// some code"
         options={options}
         editorDidMount={this.editorDidMount}/>
      </div>
      );
  }
}

我得到一个空文本区域。

Answer 1

我也遇到了同样的问题。解决方案是将 Webpack 配置为从 npm 模块内复制 vs 文件夹或使用 require.config。另一种方法是手动将其放入公用文件夹中。我不确定这是否是正确的方法，但就我而言，这种解决方法非常完美。