009-ant design pro introduced external modules

I. Overview

Original address: https://pro.ant.design/docs/import-cn

In addition to the antd components and the business components built into the scaffolding, sometimes we need to introduce other external modules. Here we take the introduction of the rich text component  react-quill  as an example.

2. Use

2.1. Introducing dependencies

Enter the following command in the terminal to complete the installation:

npm install react-quill --save

Note: Adding  --save parameters will automatically add dependencies to package.json.

2.2. Use [in 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="Rich Text Editor">
        <ReactQuill value={this.state.value} onChange={this.handleChange} />
        <Button style={{ marginTop: 16 }} onClick={this.prompt}>Prompt</Button>
      </Card>
    );
  }
}

 　　

This successfully introduces a rich text component. A few points worth noting:

• When importing, you need to pay attention to the data structure exposed by the component;

• Some components require additional styles, such as this example.