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 ...
随机推荐
- 3 August
P1013 进制位 结论:加法必为 \(n-1\) 进制:\({(n-1)}^1\) 位必为数字 1:\(0+0=0\). 模拟.字符串. #include <cstdio> #inclu ...
- [CSP-S模拟测试]:密州盛宴(贪心)
江城子·密州出猎老夫聊发少年狂,左牵黄,右擎苍,锦帽貂裘,千骑卷平冈.为报倾城随太守,亲射虎,看孙郎.酒酣胸胆尚开张,鬓微霜,又何妨!持节云中,何日遣冯唐?会挽雕弓如满月,西北望,射天狼.(这首词通过 ...
- 【c#技术】一篇文章搞掂:Newtonsoft.Json Json.Net
一.介绍 Json.Net是一个.Net高性能框架. 特点和好处: 1.为.Net对象和JSON之间的转换提供灵活的Json序列化器: 2.为阅读和书写JSON提供LINQ to JSON: 3.高性 ...
- (转)堆和栈的概念和区别 HeapOutOfMemory和StackOverflow解释
转:https://blog.csdn.net/pt666/article/details/70876410 https://blog.csdn.net/guohan_solft/article/de ...
- 三线SWD模式Jlink
三线SWD模式Jlink 在公司实习,部门经理让我做一个USB-CAN的适配器. 在网上找资料,找到一个开源的USB-CAN的适配器的资料. 采用的是CP2102芯片实现USB转串口.STM32作 ...
- 测开之路四十三:ajax请求
ajax固定套路 function http(url, data, method, success, fail) { data = method == 'GET' ? data : JSON.stri ...
- Appium移动端自动化:Appium-Desktp的使用以及定位元素方式总结
一.appium-desktop功能介绍 1.打开appium-desktop,点击start session 2.打开后,点击屏幕右上角的搜索按钮 3.然后会打开配置页面,在本地服务配置信息同上面写 ...
- VUE mixins(混入)
mixins是在引入组件之后 将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并 相当于在引入后 父组件的各种属性方法都被扩充了. 单纯组件引用: 父组件 ...
- Linux系统中NFS服务配置
文章目录: 一.NFS服务简介 二.NFS服务端配置 三.NFS客户端配置 四. ...
- Codeforces Fix a Tree
Fix a Tree time limit per test2 seconds A tree is an undirected connected graph without cycles. Let' ...