如何在 ReactJS 中使用“react-qr-code”生成二维码？

以下方法介绍了如何在 React 中生成 QR-Code。我们已经使用 react-qr-code 包来实现这一点。二维码是一个方形网格，可以通过智能手机等数字设备轻松读取。对于二维码，我们将使用一个名为react-qr-code的 npm 包。

句法：

道具类型：

• value：二维码的值。
• title：二维码的标题。
• bgcolor：二维码的背景色。
• fgcolor：二维码的前景色。
• size：二维码的大小。
• level：定义二维码的等级。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建 React 应用程序：

npx create-react-app gfg-qrcode

第 2 步：现在使用以下命令进入您的项目文件夹，即 gfg-qrcode：

cd gfg-qrcode

第 3 步：现在使用以下命令将包安装到您的项目文件夹中：

npm install react-qr-code

项目结构：它看起来像这样。

示例：在 ReactJS 中创建二维码功能。在App.js文件中写下以下代码。

App.js

import { useState } from 'react';
import QRCode from 'react-qr-code';
  
function App() {
  const [value, setValue] = useState();
  const [back, setBack] = useState('#FFFFFF');
  const [fore, setFore] = useState('#000000');
  const [size, setSize] = useState(256);
  
  return (
    

      
        

        

         setValue(e.target.value)}
          placeholder="Value of Qr-code"
        />
        

        

         setBack(e.target.value)}
          placeholder="Background color"
        />
        

        

         setFore(e.target.value)}
          placeholder="Foreground color"
        />
        

        

         setSize(parseInt(e.target.value === 
                           '' ? 0 : e.target.value, 10))}
          placeholder="Size of Qr-code"
        />
        

        

        

        {value && (
          
        )}
      
    
  );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://www.npmjs.com/package/react-qr-code