react codemirror使用以及遇到的大坑

1.安装

npm install react-codemirror2 codemirror --save

2.配置及使用

import {UnControlled as CodeMirror} from 'react-codemirror2';

核心

import 'codemirror/lib/codemirror.css';
import 'codemirror/lib/codemirror.js';

全屏

import 'codemirror/addon/display/fullscreen.css';
import 'codemirror/addon/display/fullscreen.js';

<CodeMirror
    ref="editor"
    onChange={(code, text) => this.changeConfig(code, text)}
    value={configCode}
    options={{
      lineNumbers: true,
      keyMap: 'sublime',
      mode: 'jsx',
      theme: "ambiance",
      readOnly: !allowEdit
    }}
/>

3.遇到的问题

使用setState后数据更新，codemirror里内容不更新，需点击屏幕一下，才更新

解决办法：增加refresh刷新

changeConfig = async (CodeMirror) => {
  setTimeout(()=>{
    CodeMirror.refresh()
  }, 1)
}