我正在使用ReactCodemirror2 Package 器,以便将Javascript编辑器带到我的ReactJS应用程序中。问题是我无法弄清楚如何重用已定义的变量,我的意思是:
正如你所看到的,firstNumber
没有出现在自动完成对话框中。我做了一个研究,我发现anyword-hint.js
可能会做这个把戏,期待任何以前写的单词。我怎么能告诉编辑器使用anyword-hint
?或者有什么更好的方法来使用预定义的变量?
这是我的:
import React from 'react';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/abcdef.css';
import 'codemirror/theme/eclipse.css';
import 'codemirror/lib/codemirror';
import 'codemirror/theme/mbo.css';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/addon/hint/show-hint';
import 'codemirror/addon/hint/javascript-hint';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/keymap/sublime';
import 'codemirror/addon/edit/closebrackets';
import 'codemirror/addon/edit/closetag';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/comment-fold';
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/lint/lint.css';
import 'codemirror/addon/lint/lint';
import 'codemirror/addon/lint/javascript-lint';
import { JSHINT } from 'jshint';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/addon/hint/anyword-hint';
window.JSHINT = JSHINT;
export default function MyEditor(props) {
const [options, setOptions] = useState({
mode: 'javascript',
lineWrapping: true,
smartIndent: true,
lineNumbers: true,
foldGutter: true,
gutters: [
'CodeMirror-linenumbers',
'CodeMirror-foldgutter',
'CodeMirror-lint-markers'
],
autoCloseTags: true,
keyMap: 'sublime',
matchBrackets: true,
autoCloseBrackets: true,
lint: true
});
const extraKeys = React.useMemo(() => ({
'Ctrl-Space': 'autocomplete',
Tab: 'autocomplete'
}), []);
useEffect(() => {
const opt = { ...options };
opt.extraKeys = extraKeys;
setOptions(opt);
}, []);
return (
<CodeMirror
editorDidMount={editor => {
}}
value={code}
options={options}
onBeforeChange={(editor, data, value) => {
}}
onChange={(editor, data, value) => {
}}
className={height !== 0 ? classes.setHeight : null}
/>
);
}
1条答案
按热度按时间nqwrtyyt1#
从索引文件中删除React.StrictMode可以解决这个问题,我仍然在寻找它以这种方式工作的原因