import { MonacoDiffEditor } from 'react-monaco-editor';
导入 'react-monaco-editor' 组件;
const [diffLeft, setDiffLeft] = useState();
const [diffRight, setDiffRight] = useState();
获取到diff 的左右两测内容后, 放入setDiffLeft, setDiffRight。
<div>
<MonacoDiffEditor
width="800"
height="600"
Language="json"
theme='vs-dark'
original={diffLeft}
value={diffRight}
options={editorOptions}
/>
</div>
这里要diff的是json格式的文本。
const editorOptions = {
overviewRulerBorder: false,
autoIndent: 'advanced',
diffWordWrap: 'on',
diffAlgorithm: 'smart',
readOnly: true,
}
diff 组件选项参考editor | Monaco Editor API