我有一个维护代码的状态。代码可以在外部更新，也可以由用户在CodeMirror 6编辑器中更新，然后更新setCode。(例如，在我的示例代码中，我将其更新为本地状态。(
当code从外部更改时，如何更新CodeMirror的值？
我的代码的简化情况：
import React, { useState, useRef, useEffect } from 'react';
import { basicSetup, EditorView } from 'codemirror';
import { EditorState, Compartment } from '@codemirror/state';
import { keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';
const CodeEditor: React.FC = () => {
const [code, setCode] = useState("initial code state that can be changed externally");
const editor = useRef<any>();
const valueRef = useRef<string>(code);
useEffect(() => {
valueRef.current = code;
}, [code]);
useEffect(() => {
// CodeMirror Extension: update code in store
const onUpdate = EditorView.updateListener.of((v) => {
setCode(v.state.doc.toString());
});
const codeMirrorOptions = {
doc: valueRef.current,
lineNumbers: true,
lineWrapping: true,
width: '300px',
autoCloseBrackets: true,
cursorScrollMargin: 48,
indentUnit: 2,
tabSize: 2,
styleActiveLine: true,
viewportMargin: 99,
extensions: [
basicSetup,
keymap.of(defaultKeymap),
onUpdate,
],
};
const startState = EditorState.create(codeMirrorOptions);
const view = new EditorView({
state: startState,
parent: editor.current,
});
return () => {
view.destroy();
};
}, []);
return <div ref={editor} />;
};
export default CodeEditor;
(这个答案自由衍生自其他答案：https://stackoverflow.com/a/71071618/2728820)
view.dispatch({
changes: {
from: 0,
to: view.state.doc.length,
insert: state
}
})
您可以在代码镜像示例中阅读更多关于它的信息。