React JsBarcode使用

wangxinarhat 发布于2019-05-23 11:57 / 3169人阅读

摘要：瞎扯百度搜了一下发现很多教怎么用的就是没有封装组件的实际这个东西用起来还是很简单的今天正好封装了个组件今天算是写的第三个月了还是比较好上手的几种应用这种是的明显不是想要的略过这种用找的方法感觉不好这种有点不明白看起来也不是想要的

瞎扯

百度,google搜了一下,发现很多教怎么用的,就是没有封装组件的.

实际这个东西,用起来还是很简单的.

今天正好封装了个组件.

今天算是写react的第三个月了.react还是比较好上手的.

JsBarcode

几种应用:

这种是JQuery的.明显不是想要的,略过

这种用classname找的方法.感觉不好.

这种有点不明白.看起来也不是想要的.

最后这个才像是需要的.

封装

/**
 * 简单生成条形码
 * {
 * width: 2,//较细处条形码的宽度
 * height: 100, //条形码的宽度，无高度直接设置项，由位数决定，可以通过CSS去调整，见下
 * 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 (

简单使用

   "45"
        width="1"//这里只能是大于1的整数
    />

期待你的评论,点赞

私有云 GPU服务器 react使用webrtc JsBarcode react _React

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6928.html

React 328道最全面试题(持续更新)

摘要：希望大家在这浮夸的前端圈里，保持冷静，坚持每天花分钟来学习与思考。今天的React题没有太多的故事…… 半个月前出了248个Vue的知识点，受到很多朋友的关注，都强烈要求再出多些React相前的面试题，受到大家的邀请，我又找了20多个React的使用者，他们给出了328道React的面试题，由我整理好发给大家，同时发布在了前端面试每日3+1的React专题，希望对大家有所帮助，同时大...

kumfo 2019-08-26 10:13 评论0 收藏0
React 深入系列1：React 中的元素、组件、实例和节点

摘要：中的元素组件实例和节点，是中关系密切的个概念，也是很容易让初学者迷惑的个概念。组件和元素关系密切，组件最核心的作用是返回元素。只有组件实例化后，每一个组件实例才有了自己的和，才持有对它的节点和子组件实例的引用。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 中的元素、组件、实...

LeviDing 2019-08-22 17:26 评论0 收藏0
React 深入系列１：React 中的元素、组件、实例和节点

摘要：中的元素组件实例和节点，是中关系密切的个概念，也是很容易让初学者迷惑的个概念。组件和元素关系密切，组件最核心的作用是返回元素。只有组件实例化后，每一个组件实例才有了自己的和，才持有对它的节点和子组件实例的引用。文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解...

techstay 2019-08-22 16:01 评论0 收藏0
学习React之前你需要知道的的JavaScript基础知识

摘要：和类在开始时遇到类组件，只是需要有关类的基础。毕竟，中的条件呈现仅再次显示大多数是而不是特定的任何内容。在我的研讨会期间，更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法，但也包括三元运算符，语言中的简写版本，此对象，JavaScript内置函数（map，reduce，filter）或更常识性的概念，如：可组合性，可重用...

bitkylin 2019-08-02 11:01 评论0 收藏0