日更(五十)-react-JsBarcode

瞎扯

百度,google搜了一下,發現很多教怎麼用的,就是沒有封裝組件的.

實際這個東西,用起來還是很簡單的.

今天正好封裝了個組件.

今天算是寫react的第三個月了.react還是比較好上手的.

JsBarcode

幾種應用:

這種是JQuery的.明顯不是想要的,略過

---

這種用classname找的方法.好像也不行.

---

這種有點不明白.看起來也不是想要的.

---

最後這個纔像是需要的.

封裝

import React, { Component } from 'react';
import * as Barcode from 'jsbarcode';

/**
 * 簡單生成條形碼
 */
class SimpleBarcode extends Component {
    componentDidMount() {
        this.createBarcode();
    }

    componentWillReceiveProps(nextProps) {
        if (this.props !== nextProps) {
            this.createBarcode();
        }
    }

    createBarcode = () => {
        if (!this.barcode) return;
        const {
            width = 1, height = 35, margin = 0, label, displayValue=true
        } = this.props;
        if (!label) {
            return;
        }
        Barcode(this.barcode, label, {
            displayValue, //是否在下面顯示具體文字
            width, //線的寬度係數,1是正常,2是兩倍,數越大越粗.
            height,// 條形碼高度
            margin,
        });
    };

    render() {
        const { labelClassName, label, className , displayValue=true} = this.props;
        return (
            <div className={className}>
                <svg
                    ref={(ref) => {
                        this.barcode = ref;
                    }}
                />
                {displayValue?null:<p className={labelClassName}>{label}</p>}
            </div>
        );
    }
}

export default SimpleBarcode;

---

您的喜歡與回覆是我最大的動力－＿－
交流羣:493180098