react 中使用 JsBarcode 显示条形码
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 显示条形码的更多相关文章
- react中引入图片路劲正确但是页面上不显示或者打包后不能正常显示的问题
一.react中图片引入方式 以前我们用img引入图片只需要如下即可,在react中这样写会报错: <img src="../assets/zzsc1.png" /> ...
- 【原】React中,map出来的元素添加事件无法使用
在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- 在react中实现打印功能
最近项目中,前端采用react+antd+dva的组合,已经完成了后头管理类系统产品的更新迭代工作. 今天有一个新需求,需要在后台管理系统中实现点击打印完成指定页面的打印功能. 之前也没接触过,只知道 ...
- React中props
今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了 ...
- react中的路由模块化
在vue中,可以将路由单独写在一个配置文件中,便于整理维护,而在前面总结整理的react中,都是直接将路由配置放在需要使用的地方,少数的时候话可以接受,但是当项目做大,这种方式就不再被推荐了,我们再r ...
- React中如何优雅的捕捉事件错误
React中如何优雅的捕捉事件错误 前话 人无完人,所以代码总会出错,出错并不可怕,关键是怎么处理. 我就想问问大家react的错误怎么捕捉呢? 这个时候: 小白:怎么处理? 小白+: ErrorBo ...
- 深入理解react中的虚拟DOM、diff算法
文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么? ...
- react系列(五)在React中使用Redux
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...
随机推荐
- 前端每日实战:99# 视频演示如何用纯 CSS 创作一个过山车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KBxYZg/ 可交互视频 此视频是 ...
- appium移动端自动化测试的一些感想
花了一个多月的时间来复习,学习appium+python+android的UI层的自动化测试. 从最开始的环境搭建,都后面运行脚本报错各类错,到优化脚本结构,基本上问题不断. 相比,selenium做 ...
- 杂项:电子表格程序-u
ylbtech-杂项:电子表格程序-u 1.返回顶部 1.1 https://www.gemboxsoftware.com/spreadsheet 1.1 https://www.spreadshee ...
- 关系型数据库MySQL(二)_索引
优点 大大加快数据的查询速度 创建唯一性索引,保证数据库表中每一行数据的唯一性 在使用分组和排序子句进行数据检索时,可以显著减少查询中分组和排序的时间 缺点 索引需要占物理空间 当对表中的数据进行增删 ...
- mybatis 学习视频总结记录
学习mybaits简单增删改查例子记录 此整理是学习视频后的视频内容整理,后半段还没有整理 网易云课堂 SSM高级整合视频 地址 : http://study.163.com/course/cours ...
- 怎样使用haskell编写应用程序
参考:http://stackoverflow.com/a/9153617 http://www.haskell.org/haskellwiki/How_to_write_a_Haskell_prog ...
- Mutable and Immutable Variables in Python
本文解决python中比较令人困惑的一个小问题:传递到函数中的参数若在函数中进行了重新赋值,对于函数外的原变量有何影响.看一个小栗子: def fun(a): a=2 return a=1 fun(a ...
- 【一起学源码-微服务】Nexflix Eureka 源码三:EurekaServer启动之EurekaServer上下文EurekaClient创建
前言 上篇文章已经介绍了 Eureka Server 环境和上下文初始化的一些代码,其中重点讲解了environment初始化使用的单例模式,以及EurekaServerConfigure基于接口对外 ...
- python 简易计算器
import tkinter import tkinter.messagebox import math ''' 波波版计算器可实现的功能 1.能进行简单的加减惩处 2.能进行开根号操作 3.能进行后 ...
- HTML图片
HTML图片 html图片 <img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲 ...