react, Diff组件实现

最新推荐文章于 2024-07-04 22:20:15 发布

同渡屮

最新推荐文章于 2024-07-04 22:20:15 发布

阅读量722

点赞数

文章标签： react-monaco-editor JSON diff editorOptions 代码比较

本文链接：https://blog.csdn.net/qq_42854983/article/details/127803075

版权

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