现象:
<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, // 重点是这句,为truescrollbarStyle: 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编辑器总结