qrcode.react(查看官网) 是一个用于 React 应用的 QR 码生成组件。下面是如何使用它的详细指南:
1、安装
npm install qrcode.react
# 或者
yarn add qrcode.react
2、基本用法
import {QRCodeSVG} from 'qrcode.react';const myPage = () => {return (<div><QRCodeSVG value="https://reactjs.org/" /><p>扫一扫打开链接</p></div>);
};export default myPage;
3、效果展示
4、可配置数据
- size: QR 码的大小(像素),默认 128
- level: 纠错级别,可选 ‘L’, ‘M’, ‘Q’, ‘H’(从低到高),默认 ‘L’
- bgColor: 背景色,默认 “#FFFFFF”
- fgColor: 前景色(QR码颜色),默认 “#000000”
- includeMargin: 是否包含边距,默认 false
- renderAs: 渲染方式,可选 ‘canvas’ 或 ‘svg’,默认 ‘svg’
5、注意事项
- 确保 value 属性不为空,否则会抛出错误
- 对于 SVG 渲染,所有尺寸都应该是整数
- 如果需要更复杂的 QR 码生成功能,可能需要考虑其他库