react-ace代码编辑

ant design pro中使用react-ace

在react中使用react-ace,实现编辑代码

• 安装包

npm install react-ace
npm install brace

• 引入包

import brace from 'brace';
import AceEditor from 'react-ace';

import 'brace/mode/json';
import 'brace/mode/yaml';
import 'brace/theme/github';

• 页面渲染

<AceEditor
  width="100%"
  mode="json"
  readOnly={fetchLoading || editLoading}
  value={fetchLoading ? 'loading...' : this.value}
  onChange={this.onChange}
  theme="github"
  name="UNIQUE_ID_OF_DIV"
  wrapEnabled={true} // 换行
  editorProps={{ $blockScrolling: Infinity }}
/>

• onChange方法

onChange = newValue => {
  this.value = newValue;
};