现象:
<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>