码迷,mamicode.com
首页 > 其他好文 > 详细

009-ant design pro 引入外部模块

时间:2018-05-01 13:53:52      阅读:1107      评论:0      收藏:0      [点我收藏+]

标签:target   img   html   ref   this   cli   tar   turn   参数   

一、概述

原文地址: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 时需要注意组件暴露的数据结构;

  • 有一些组件需要额外引入样式,比如本例。

 

009-ant design pro 引入外部模块

标签:target   img   html   ref   this   cli   tar   turn   参数   

原文地址:https://www.cnblogs.com/bjlhx/p/8975888.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!