我正在尝试使用react-monaco-editor npm包组件将monaco编辑器导入到我的react应用程序中。这些是我从npm下载的软件包的版本:
"react-monaco-editor": "^0.13.0",
"@types/react-monaco-editor": "^0.10.0"
一切似乎都很有效(Less,html,javascript,甚至需要javascript),除了我收到语法错误,说我找不到我要导入的模块或命名空间(如Electron)。这是尝试导入模块的一个打字稿文件的示例错误,也是无法找到Electron命名空间的错误。
这与VS Code中使用monaco编辑器的代码相同:
这是我在引用MonacoEditor组件时使用的代码示例。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import MonacoEditor from 'react-monaco-editor';
import { IEditorFile, IEditorFilePassedProps, IEditorFileReduxProps } from './editor-file-interfaces';
import { IReduxState } from '../../shared/interfaces/redux-state';
import './editor-file.less';
class EditorFile extends Component<IEditorFile, any> {
editor = null;
constructor(props: IEditorFile) {
super(props);
this.state = {
code: this.props.file.content
};
}
componentWillReceiveProps(nextProps: any) {
if (typeof nextProps.file !== undefined) {
this.setState({ code: nextProps.file.content });
}
}
render() {
const code = this.state.code;
const options = {
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: false,
cursorStyle: 'line',
automaticLayout: false
};
return (
<div>
<div className='file-content-container'>
<MonacoEditor
language={this.props.file.fileType}
value={code}
theme='vs-dark'
options={options}
/>
</div>
</div>
);
}
}
const mapStateToProps = (state: IReduxState): IEditorFileReduxProps => {
return {
fileExplorerInfo: state.fileExplorer
};
};
export default connect<IEditorFileReduxProps, null, IEditorFilePassedProps, IReduxState>(mapStateToProps)(EditorFile);
传递给MonacoEditor组件的语言是tsx / ts文件的“typescript”。我不知道如何解决这个问题,所以非常感谢任何帮助!