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. (转)springboot应用启动原理(一) 将启动脚本嵌入jar

    转:https://segmentfault.com/a/1190000013489340 Spring Boot Takes an opinionated view of building prod ...

  2. 使用nsenter进入docker容器后端报错 mesg: ttyname failed: No such file or directory

    通过nsenter 进入到docker容器的后端总是报下面的错,, [root@devdtt ~]# docker inspect -f {{.State.Pid}} mynginx411950 [r ...

  3. 怎样使用haskell编写应用程序

    参考:http://stackoverflow.com/a/9153617 http://www.haskell.org/haskellwiki/How_to_write_a_Haskell_prog ...

  4. JNDI数据源的配置及使用

    数据源的作用JDBC操作的步骤:  1. 加载驱动程序  2. 连接数据库  3. 操作数据库  4. 关闭数据库,释放连接 也就是说,所有的用户都需要经过此四步进行操作,但是这四步之中有三步对所有人 ...

  5. 转载:LESS基本用法

    转载出处:https://blog.csdn.net/qq_38209578/article/details/80566860 转载出处:https://blog.csdn.net/weixin_44 ...

  6. python isinstance()函数和type()函数

    一.type()用法 描述: python的 type 函数有两个用法,当只有一个参数的时候,返回对象的类型.当有三个参数的时候返回一个类对象. 语法: 一个参数:type(object) 三个参数: ...

  7. java并发编程之美-阅读记录2

    2.1什么是多线程并发编程 并发:是指在同一时间段内,多个任务同时在执行,并且执行没有结束(同一时间段又包括多个单位时间,也就是说一个cpu执行多个任务) 并行:是指在单位时间内多个任务在同时执行(也 ...

  8. YARN学习笔记

    分布式资源调度框架 Yet Another Resource Negotiator YARN 不同框架使用相同的系统资源 YARN的核心组件(架构) ResourceManager RM 整个集群同一 ...

  9. js转换成字符串

    有两种方法: 1.对于boolean, number, string类型,可调用toString()方法 2.用String(var)方法 其中,第二种方法使用范围更广,可将没有toString()方 ...

  10. IE历史纪录

    signed int __cdecl sub_475790(_BYTE *a1) { signed int result; // eax DWORD v2; // [esp+10h] [ebp-10h ...