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 ...
随机推荐
- Windows10下安装CentOS7双系统
参考: 参考1 参考2 问题1
- Powercli随笔 - PowerCLI script to sequentially Storage vMotion VMs from a CSV File
PowerCLI script to sequentially Storage vMotion VMs from a CSV File This is a PowerCLI script that I ...
- 在阿里云 Ubuntu上通过nginx+uwsgi服务器部署Django出现的502错误
https://blog.csdn.net/luojie140/article/details/76919471 https://blog.csdn.net/sinat_21302587/articl ...
- Vue&webpack入门实践
目录 1. 下载安装Vue 2. Vue 2.1 Vue要素 2.2 指令 2.3 组件化 2.4 vue-router 3. webpack 3.1 webpack简介 3.2 四个核心概念 3.3 ...
- 迪杰斯特拉算法(Dijkstra)
模板一: 时间复杂度O(n2) int dijkstra(int s,int m) //s为起点,m为终点 { memset(dist,,sizeof(dist)); //初始化,dist数组用来储存 ...
- 爬虫(一)—— 请求库(一)requests请求库
目录 requests请求库 爬虫:爬取.解析.存储 一.请求 二.响应 三.简单爬虫 四.requests高级用法 五.session方法(建议使用) 六.selenium模块 requests请求 ...
- smartforms 字段文本碰见 "-" 自动换行
长文本会在 '-' 这个符号处自动换行 原理:SAP 标准SMARTFORMS 的功能,遇到 '-' 自动判断后面字段是否能在本行完全显示,不够则换行 注意:如果一行文本有多个 ‘-’ ,则 判断 ' ...
- 隐藏父类方法的new和重写父类虚方法virtual的区别
一.代码 public class Parent { public void Method_A() { Console.WriteLine("Parent Method_A"); ...
- A Bite Of React(2) Component, Props and State
component component:用户自己定义的元素 const element = <Welcome name="Sara" />; class Welcome ...
- 【目录】sql server 性能调优
随笔分类 - sql server 性能调优 sql server 性能调优之 资源等待之网络I/O 摘要: 一.概述 与网络I/O相关的等待的主要是ASYNC_NETWORK_IO,是指当sql s ...