ant design pro （九）引入外部模塊

一、概述

原文地址：https://pro.ant.design/docs/import-cn

除了 antd 組件以及腳手架內置的業務組件，有時我們還需要引入其他外部模塊，這里以引入富文本組件 react-quill 為例進行介紹。

二、使用

2.1、引入依賴

在終端輸入下面的命令完成安裝：

npm install react-quill --save

注意：加上 --save 參數會自動添加依賴到 package.json 中去。

2.2、使用【在NewPage中】

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 }}></span>,
    });
  };

  render() {
    return (
      <Card title="富文本編輯器">
        <ReactQuill value={this.state.value} onChange={this.handleChange} />
        <Button style={{ marginTop: 16 }} onClick={this.prompt}>Prompt</Button>
      </Card>
    );
  }
}

這樣就成功引入了一個富文本組件。有幾點值得注意：

• import 時需要注意組件暴露的數據結構；

• 有一些組件需要額外引入樣式，比如本例。