import React from 'react';
import JsBarcode from 'jsbarcode'; export class RefundSheet extends React.Component {
constructor(props) {
super(props);
this.state = {
value: props.barCode, //由父组件传入用来生成条形码的字符串“barCode”
};
}
componentDidMount() {
  // 调用 JsBarcode方法生成条形码
JsBarcode(this.barcode, this.state.value, {
displayValue: false,
width: 1.5,
height: 50,
margin: 0,
});
} render() {
return (
<div className="barcode-box">
<svg
ref={(ref) => {
this.barcode = ref;
}}
/>
</div>
);
}
}
export default RefundSheet;//导出组件

react 中使用 JsBarcode 显示条形码的更多相关文章

  1. react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题

    一.react中图片引入方式 以前我们用img引入图片只需要如下即可,在react中这样写会报错: <img src="../assets/zzsc1.png" /> ...

  2. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  3. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  4. 在react中实现打印功能

    最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...

  5. React中props

    今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...

  6. react中的路由模块化

    在vue中,可以将路由单独写在一个配置文件中,便于整理维护,而在前面总结整理的react中,都是直接将路由配置放在需要使用的地方,少数的时候话可以接受,但是当项目做大,这种方式就不再被推荐了,我们再r ...

  7. React中如何优雅的捕捉事件错误

    React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...

  8. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  9. react系列(五)在React中使用Redux

    上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...

随机推荐

  1. 服务器上的 IPProxy代理设置

    1.window 平台 CCProxy 安装包 传送门: http://www.xue51.com/soft/2794.html 该页面详细的说明了ccproxy怎么安装.怎么破jie.... 下面老 ...

  2. AIZU 2560 [想法题]

    表示敲完多项式乘法&高精度乘法两道FFT模板题后就开始来磕这题了 这题相对而言应该不算模板题 不过神犇们肯定还是一眼看穿 如果原OJ访问速度较慢的话可以考虑戳这里 http://acm.hus ...

  3. feignClient传参(参数为对象类型)的一个坑

    客户端 @RequestMapping(value = "/friendCircleComment/comment",method = RequestMethod.POST) R ...

  4. flask实现异步任务

    最近在开发同步mysql数据到redis的接口,因为数据同步涉及各种增删查改,如果用同步实现,可能回造成连接超时.堵塞,所以,使用python实现异步任务. 代码实现from flask import ...

  5. 【Unity系统知识】关于SendMessage的用法

    [Message相关有3个函数] 一.功能:用于向某个GameObject发送一条信息,让它完成特定功能. 1.执行GameObject自身的Script中“函数名”的函数SendMessage (& ...

  6. 洛谷P3366 【模板】最小生成树(LCT)

    [模板]最小生成树 题目传送门 解题思路 用LCT来维护最小生成树. 除了把各顶点作为节点外,每条边也都视为一个节点.对于要加入的边\(e\),检查其两顶点\(x\)和\(y\)是否在同一棵树中,如果 ...

  7. 【翻译】Knowledge-Aware Natural Language Understanding(摘要及目录)

    翻译Pradeep Dasigi的一篇长文 Knowledge-Aware Natural Language Understanding 基于知识感知的自然语言理解 摘要 Natural Langua ...

  8. python读取excel保存到mysql

    首先安装xlrd模块:pip install xlrd ,核心代码网上有很多,这里主要是关于一些个人实际碰到问题细节的处理 1.excel数据不规范导致读取的数据存在空白行和列: 2.参数化执行sql ...

  9. QC OTA

    Note: First make sure QTP connect to QC.(转自:http://blog.csdn.net/franktan2010/article/details/724331 ...

  10. 怒转一波,此人整理的Flink特别好

    Apache Flink:特性.概念.组件栈.架构及原理分析 Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink运行时(Flink Runtim ...