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. 22 October in 614

    Contest A. defile struct 自定义排序.按照题意抽象成模型模拟就可以了. 自定义排序核心代码: struct node { int x, id; } d[1000003]; bo ...

  2. 多列布局(column)

    容器的属性 column-width: auto | < length > .给列定义一个最小宽度(min-width). auto: 列宽由其他元素决定. length: 显式设置最小宽 ...

  3. qbxt Day2 on 19-7-25

    qbxt Day2 on 19-7-25 --TGZCBY 上午 1. 矩阵乘法在图论上的应用 有的时候图论的转移方程可以用dp的方式转移 特别是两个数的乘积求和的时候 比如邻接矩阵中f[i][j]表 ...

  4. linux显示文本文件指定行数的数据

    sed -n '2,4p' /core/home_info.txt 显示这个txt的2-4行,此外还有 cat /core/home_info.txt |   tail -n 1000:显示最后100 ...

  5. Windows 08R2 IIS网站架设

    目录 目录 配置和安装IIS 环境设置 安装IIS服务器 网站的站点目录和欢迎页面 配置和安装IIS IIS是Windows的网站服务器,所以配置IIS服务的前提是需要一个网址.和DNS域名并添加主机 ...

  6. 安装php时,configure: error: xml2-config not found. Please check your libxml2 installation

    参考文章:http://blog.csdn.net/anljf/article/details/6981247 安装php时的报错configure: error: xml2-config not f ...

  7. charles抓包看性能数据

    1.优化某个接口或加载速度(H5加载速度慢) 抓包看Overview ①看Duration,就是接口的加载时间 ②看Latency,就是延时一端传播到另一端所花费的时间:一般和网络有关:可以综合Dur ...

  8. python 使用[[v]*n]*m遇到的问题

    需求:想通过python生成m行n列的矩阵 方式1:(有问题) data = [[0]*3]*4 #4行3列 data 输出 [[0, 0, 0], [0, 0, 0], [0, 0, 0], [0, ...

  9. excel cannot access the file there are several possible reasons

    original link Microsoft Office Excel cannot access the file ‘c:\file.xlsx’. There are several possib ...

  10. php mysql 多表查询之子查询语句

    所谓子查询语句,就是先通过一个语句来查询出一个结果,然后再通过一个查询语句从这个结果中再次查询.子查询语句一般有以下3种.下面以一个案例来做讲解. 案例:查询[例1]中每个分类下的最新的那一条商品信息 ...