前言
QR Code（二维码）已经成为了现代社会重要的信息传递方式，其广泛应用于电子支付、快递物流、信息交互等多种场景中。在前端开发中，通常使用 JavaScript 库来生成 QR Code。其中，我们介绍一款使用 qrcode.js 库封装的 React组件 qrcode-react，它可以非常方便地在 React 应用中使用。
安装
qrcode-react 是一个基于 npm 的开源库，可以通过 npm 直接安装，使用以下命令进行安装：
npm install qrcode-react --save
如何使用
qrcode-react 可以方便地生成二维码，并与 React 有良好的集成。我们来看一下如何使用它。
在你的 React 组件中，先导入 qrcode-react：
import QrCode from 'qrcode-react';
然后在 render 函数中，加入以下代码：
<QrCode value={"Hello World"} />上述代码将在页面中渲染一个默认大小的二维码，如下图所示：
其中参数 value 指定了二维码中的信息。你可以根据自己的需求进行填充。
我们可以通过 props 对组件进行更多定制，例如：
size: 用来改变二维码的大小。默认大小是290；
bgColor: 用来改变二维码的背景颜色。默认的背景颜色是 #ffffff
fgColor: 用来改变二维码前景颜色（码块颜色）。默认的是 #000000
<QrCode value={"Hello World"} size={300} bgColor={"#ffffff"} fgColor={"#000000"}/>上述代码将生成一个大小为 300x300 的二维码，背景颜色为白色，码块颜色为黑色，如下图所示：
更多的可定制属性，可以查看 qrcode-react 的 GitHub 国内用户可使用 gitee.com。
结语
随着二维码的普及与应用，二维码生成组件的需求也会越来越多。qrcode-react 是一个非常简单易用的二维码生成组件，相信它能很好地帮助前端开发者完成二维码的生成需求，并给使用 React 技术的开发者提供了更佳的使用体验和效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb61eb5cbfe1ea06114dd