React Js 生成二维码 插件 qrcode.react

1. qrcode 是一个js插件，具体可以github，这边不多介绍。
2. qrcode.react这个是修改为React的一个插件。
3. 具体是生成二维码的原理是什么，这边也不多做介绍。

下面介绍如何使用，或封装。

package.json添加："qrcode.react": "^0.6.1","copy-to-clipboard": "^3.0.5"npm install webpackwebpack-dev-server

下面代码第一个注释，是指QRcode组件如何使用，第二个注释是介绍这个封装后的组件如何使用。相信大家都看得懂。这边用了antd，如果不需要，请自行删除。复制插件我的博客有介绍，大家自行翻阅。

/** * Created by wuyakun on 2017/3/23. * 二维码 * * eg:<QRCode value="http://facebook.github.io/react/" /> * prop    type    default value value    string size    number    128 bgColor    string (CSS color)    "#FFFFFF" fgColor    string (CSS color)    "#000000" level    string ('L' 'M' 'Q' 'H')    'L' */import {Input, message, Modal, Icon} from 'antd';import React from 'react';const QRCode = require('qrcode.react');import copy from 'copy-to-clipboard';/** * 二维码 <QRCodeModal url={this.state.qrcodeURL} ref="modal" size={150}/> */class QRCodeModal extends React.Component {    constructor() {        super();        this.state = {            visible: false,            url: '',            size: 150,        };    }    showModal = () => {        this.setState({            visible: true,            url: this.props.url,            size: this.props.size,        });    };    handleOk = () => {        this.setState({            visible: false        });    };    handleCancel = () => {        this.setState({            visible: false,        });    };    copyUrl = () => {        try {            //const url = this.refs.url;            // url.select();            // document.execCommand('Copy');            copy(this.props.url);        } catch (e) {            console.log(e);        }        message.success('复制成功，如果失败，请在输入框内手动复制.');    };    render() {        return (            <div >                <Modal title='活动链接'                       width={500}                       visible={this.state.visible}                       onOk={this.handleOk}                       onCancel={this.handleCancel}                       footer="">                    <div style={{float: 'left', width: this.props.size}}>                        <QRCode                            size={this.state.size}                            value={this.state.url}/>                        <div style={{textAlign: 'center', marginTop: 10}}>                            微信扫一扫                        </div>                    </div>                    <div style={{width: 300, float: 'right'}}>                        <div >                            <span>                                链接地址                            </span>                            <div style={{marginTop: 10, marginBottom: 10}}>                                <Input                                    ref='url'                                    addonAfter={<Icon type="copy" onClick={this.copyUrl}/>}                                    value={this.props.url}/>                            </div>                            <span>                                可将链接复制到您的公众号菜单中                            </span>                        </div>                    </div>                    <div style={{clear: 'both'}}>                    </div>                </Modal>            </div>        );    }}export default QRCodeModal;