引入外部模块

除了 antd 组件以及脚手架内置的业务组件，有时我们还需要引入其他外部模块，这里以引入富文本组件 react-quill 为例进行介绍。

引入依赖

在终端输入下面的命令完成安装：

  1. $ npm install react-quill --save

加上 —save 参数会自动添加依赖到 package.json 中去。

使用

直接贴代码了：

  1. import React from 'react';
  2. import { Button, notification, Card } from 'antd';
  3. import ReactQuill from 'react-quill';
  4. import 'react-quill/dist/quill.snow.css';
  6. export default class NewPage extends React.Component {
  7.   state = {
  8.     value: 'test',
  9.   };
  11.   handleChange = value => {
  12.     this.setState({
  13.       value,
  14.     });
  15.   };
  17.   prompt = () => {
  18.     notification.open({
  19.       message: 'We got value:',
  20.       description: <span dangerouslySetInnerHTML={{ __html: this.state.value }} />,
  21.     });
  22.   };
  24.   render() {
  25.     return (
  26.       <Card title="富文本编辑器">
  27.         <ReactQuill value={this.state.value} onChange={this.handleChange} />
  28.         <Button style={{ marginTop: 16 }} onClick={this.prompt}>
  29.           Prompt
  30.         </Button>
  31.       </Card>
  32.     );
  33.   }
  34. }

富文本

这样就成功引入了一个富文本组件。有几点值得注意：

  • import 时需要注意组件暴露的数据结构；
  • 有一些组件需要额外引入样式，比如本例。