项目

1. antd
2. antv
3. random-id
   生成唯一的随机数

// 安装
npm install random-id --save-dev
// 使用
import randomId from 'random-id';
...
const randomNum = randomId(8);

4. clipboard
   clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 。

// 安装 
npm install clipboard --save-dev;

// 使用
import Clipboard from 'clipboard';

// 在react中使用，要在组件加载完成的时候，给复制按钮添加点击复制事件；在组件被卸载之前，解绑复制按钮的监听事件
componentDidMount() {
  // 初始化clipboard
  this.clipboardType = new Clipboard('#btn');
  this.clipboardType.on('success', () => {
    message.info('复制成功');
  });
  this.clipboardType.on('error', () => {
    message.info('复制失败，请手动复制');
  });
}

componentWillUnmount() {
  this.clipboardType.destroy();
}
// 复制对象
<div id="target">copy target content</div>

// 复制按钮
<Icon
  type="copy"
  id="btn"
  style={{
    color: '#108ee9',
    fontSize: '16px',
    margin: '0 12px',
    lineHeight: '20px',
    cursor: 'pointer',
  }}
  data-clipboard-target="#target"
  data-clipboard-action="copy"
/>

data-clipboard-target：指向复印目标节点；
data-clipboard-action：要执行的操作，可以是"copy"，也可以是"cut"，默认是"copy"，"cut"操作只使用于<input>和<textare>

在使用的过程中，还可以从属性中复制文本，这时候不需要一个元素当触发器，可以使用data-clipboard-text属性，在后面放上需要复制的文本。

<button id="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
  Copy to clipboard
</button>

还可以在初始化clipboard的时候，设置要复制或者剪切的内容

new Clipboard('#btn', {
  text:() => "what you want to clipboard";
});

还可以在初始化clipboard的时候，设置要复制的节点

new Clipboard('#btn', {
  target:() => document.getElementById("btn");
});

5. react-codemirror

// 安装
npm install react-codemirror --save

// 使用
import 'CodeMirror' from 'react-codemirror';
// 引入css样式，也可以在样式文件中引入
import 'codemirror/lib/codemirror.css'; 
// 导入语言类型
import 'codemirror/mode/javascript/javascript';
// 导入theme文件
import 'codemirror/theme/ambiance.css';
// 定义options
const options = {
  lineNumbers: true; // 显示行号
  mode: {name: 'text/x-mysql'}, // 定义mode
  theme: 选中的theme
  readreadOnly: true; // 只读
  lineWrapping: true; // 换行
}

// 在render函数中渲染，在项目中用于展示格式化的json字符串
<CodeMirror value={JSON.stringify(info, null, 2)} options={options} />

// 获取CodeMirror对象并对其操作
const editor = this.refs.editor-sql.getCodeMirror();