1. antd
2. antv
3. random-id
   生成唯一的隨機(jī)數(shù)

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

4. clipboard
   clipboard.js是一款輕量級(jí)的實(shí)現(xiàn)復(fù)制文本到剪貼板功能的JavaScript插件。通過該插件可以將輸入框，文本域，DIV元素中的文本等文本內(nèi)容復(fù)制到剪貼板中 。

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

// 使用
import Clipboard from 'clipboard';

// 在react中使用，要在組件加載完成的時(shí)候，給復(fù)制按鈕添加點(diǎn)擊復(fù)制事件；在組件被卸載之前，解綁復(fù)制按鈕的監(jiān)聽事件
componentDidMount() {
  // 初始化clipboard
  this.clipboardType = new Clipboard('#btn');
  this.clipboardType.on('success', () => {
    message.info('復(fù)制成功');
  });
  this.clipboardType.on('error', () => {
    message.info('復(fù)制失敗，請(qǐng)手動(dòng)復(fù)制');
  });
}

componentWillUnmount() {
  this.clipboardType.destroy();
}
// 復(fù)制對(duì)象
<div id="target">copy target content</div>

// 復(fù)制按鈕
<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：指向復(fù)印目標(biāo)節(jié)點(diǎn)；
data-clipboard-action：要執(zhí)行的操作，可以是"copy"，也可以是"cut"，默認(rèn)是"copy"，"cut"操作只使用于<input>和<textare>

在使用的過程中，還可以從屬性中復(fù)制文本，這時(shí)候不需要一個(gè)元素當(dāng)觸發(fā)器，可以使用data-clipboard-text屬性，在后面放上需要復(fù)制的文本。

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

還可以在初始化clipboard的時(shí)候，設(shè)置要復(fù)制或者剪切的內(nèi)容

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

還可以在初始化clipboard的時(shí)候，設(shè)置要復(fù)制的節(jié)點(diǎn)

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'; 
// 導(dǎo)入語言類型
import 'codemirror/mode/javascript/javascript';
// 導(dǎo)入theme文件
import 'codemirror/theme/ambiance.css';
// 定義options
const options = {
  lineNumbers: true; // 顯示行號(hào)
  mode: {name: 'text/x-mysql'}, // 定義mode
  theme: 選中的theme
  readreadOnly: true; // 只讀
  lineWrapping: true; // 換行
}

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

// 獲取CodeMirror對(duì)象并對(duì)其操作
const editor = this.refs.editor-sql.getCodeMirror();