react-codemirror2 编辑器需点击一下或者延时才显示数据的问题

现象：

<Codemirror/>组件的数据已经赋上值的情况下，初始状态不渲染数据，需要点击编辑框获取焦点后才展示，或者延迟了几秒才显示出来。

原因：

指定了一些依赖的版本，可能不兼容了一些功能，导致这个现象出现

解决：

1. 手动引入自动刷新的插件;

2.配置一下参数。

代码如下：

import {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql'; 
...
// 引入自动刷新
import 'codemirror/addon/display/autorefresh'


<CodeMirror 
    value={format(code,{lanuage:'plsql'})} 
    options={
        autoRefresh: true, // 重点是这句，为true

        scrollbarStyle: null,
        mode: 'text/x-pgsql',
        theme: 'material',
        autofocus: false,
        readOnly: false,
        lineNumbers: true, 
        smartIndent: true,
        lint: true,
        lintWrapping: true
        
   } 
    onChange={(editor,data,value)=>{...}}
>
</CodeMirror>

 

官网：https://github.com/uiwjs/react-codemirror

codemirror2编辑器总结