react-ace编辑器 —— 快速使用使用如上。使用如上。

react中引用两种方法：

第一步安装：

npm install react-ace

第二步引用：

import AceEditor from 'react-ace';

第三步使用：

<AceEditor
  	mode="mysql"
  	theme="xcode"
  	onChange={this.onChange.bind(this)}
  	style={{ width: "100%", height: "100%", fontSize: "18px" }}
/>

问题：mode和theme并没有起作用，如何解决？

方法一：引入brace

安装brace

npm install brace -S

引用

// javascript、html、java、python、lua、xml、ruby、sass、markdown、mysql、json、css、typescript
import 'brace/mode/typescript';
// github、tomorrow、kuioir、twilight、xcode、textmeta、terminal、solarized-light、solarized-dark
import 'brace/theme/monokai';

使用如上。

方法二：

引用

import "ace-builds/src-noconflict/mode-yaml";
import "ace-builds/src-noconflict/theme-monokai";

使用如上。