---
order: 8
title: 引入外部模塊
type: 開發
---
除了 antd 組件以及腳手架內置的業務組件，有時我們還需要引入其他外部模塊，這里以引入富文本組件 [react-quill](https://www.npmjs.com/package/react-quill) 為例進行介紹。
## 引入依賴
在終端輸入下面的命令完成安裝：
```bash
$ npm install react-quill --save
```
> 加上 `--save` 參數會自動添加依賴到 package.json 中去。
## 使用
直接貼代碼了：
```jsx
import React from 'react';
import { Button, notification, Card } from 'antd';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
export default class NewPage extends React.Component {
state = {
value: 'test',
};
handleChange = value => {
this.setState({
value,
});
};
prompt = () => {
notification.open({
message: 'We got value:',
description: <span dangerouslySetInnerHTML={{ __html: this.state.value }} />,
});
};
render() {
return (
<Card title="富文本編輯器">
<ReactQuill value={this.state.value} onChange={this.handleChange} />
<Button style={{ marginTop: 16 }} onClick={this.prompt}>
Prompt
</Button>
</Card>
);
}
}
```
<img alt="富文本" src="https://gw.alipayobjects.com/zos/rmsportal/rHQRmMxAbSOCsEFungwd.png" />
這樣就成功引入了一個富文本組件。有幾點值得注意：
- import 時需要注意組件暴露的數據結構；
- 有一些組件需要額外引入樣式，比如本例。
