成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React JsBarcode使用

wangxinarhat / 3380人閱讀

摘要：瞎扯百度搜了一下發(fā)現(xiàn)很多教怎么用的就是沒有封裝組件的實際這個東西用起來還是很簡單的今天正好封裝了個組件今天算是寫的第三個月了還是比較好上手的幾種應(yīng)用這種是的明顯不是想要的略過這種用找的方法感覺不好這種有點不明白看起來也不是想要的

瞎扯

百度,google搜了一下,發(fā)現(xiàn)很多教怎么用的,就是沒有封裝組件的.

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

今天正好封裝了個組件.

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

JsBarcode

幾種應(yīng)用:

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

這種用classname找的方法.感覺不好.

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

最后這個才像是需要的.

封裝 
/**
 * 簡單生成條形碼
 * {
 * width: 2,//較細處條形碼的寬度
 * height: 100, //條形碼的寬度，無高度直接設(shè)置項，由位數(shù)決定，可以通過CSS去調(diào)整，見下
 * quite: 10,
 * format: "CODE128",
 * displayValue: false,//是否在條形碼下方顯示文字
 * font:"monospace",
 * textAlign:"center",
 * fontSize: 12,
 * backgroundColor:"",
 * lineColor:"#000"//條形碼顏色
 * }
 */
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, // 是否由Barcode顯示二維碼下面的值
            width, // 每條線的寬度
            height, // 高度
            margin, //邊距
        });
    };

    render() {
        const {
            labelClassName, label, labelStyle, className, style, displayValue = true,
        } = this.props;
        return (
            

                 {
                        this.barcode = ref;
                    }}
                />
                {displayValue ");
簡單使用 
   "45"
        width="1"//這里只能是大于1的整數(shù)
    />

期待你的評論,點贊

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/6928.html

相關(guān)文章

  • React 328道最全面試題(持續(xù)更新)

    摘要：希望大家在這浮夸的前端圈里，保持冷靜，堅持每天花分鐘來學(xué)習(xí)與思考。 今天的React題沒有太多的故事…… 半個月前出了248個Vue的知識點，受到很多朋友的關(guān)注，都強烈要求再出多些React相前的面試題，受到大家的邀請，我又找了20多個React的使用者，他們給出了328道React的面試題，由我整理好發(fā)給大家，同時發(fā)布在了前端面試每日3+1的React專題，希望對大家有所幫助，同時大...

    kumfo 評論0 收藏0

  • React 深入系列1：React 中的元素、組件、實例和節(jié)點

    摘要：中的元素組件實例和節(jié)點，是中關(guān)系密切的個概念，也是很容易讓初學(xué)者迷惑的個概念。組件和元素關(guān)系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節(jié)點和子組件實例的引用。 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解，以及在項目中更加靈活地使用React。 React 中的元素、組件、實...

    LeviDing 評論0 收藏0

  • React 深入系列１：React 中的元素、組件、實例和節(jié)點

    摘要：中的元素組件實例和節(jié)點，是中關(guān)系密切的個概念，也是很容易讓初學(xué)者迷惑的個概念。組件和元素關(guān)系密切，組件最核心的作用是返回元素。只有組件實例化后，每一個組件實例才有了自己的和，才持有對它的節(jié)點和子組件實例的引用。 文：徐超，《React進階之路》作者授權(quán)發(fā)布，轉(zhuǎn)載請注明作者及出處 React 深入系列，深入講解了React中的重點概念、特性和模式等，旨在幫助大家加深對React的理解...

    techstay 評論0 收藏0

  • 學(xué)習(xí)React之前你需要知道的的JavaScript基礎(chǔ)知識

    摘要：和類在開始時遇到類組件，只是需要有關(guān)類的基礎(chǔ)。畢竟，中的條件呈現(xiàn)僅再次顯示大多數(shù)是而不是特定的任何內(nèi)容。 在我的研討會期間，更多的材料是關(guān)于JavaScript而不是React。其中大部分歸結(jié)為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內(nèi)置函數(shù)（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

    bitkylin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<