react-qr-reader的使用

React-qr-reader是一个React组件库，用于在React应用程序中读取QR码。以下是使用react-qr-reader的基本步骤：

1. 首先，使用npm或yarn安装react-qr-reader：

npm install react-qr-reader

或

yarn add react-qr-reader

2. 然后，在您的React组件中导入QRReader组件：

import QRReader from 'react-qr-reader';

3. 在您的组件中使用QRReader组件，并将onScan回调传递给它。onScan回调将在扫描到QR码时被触发，并将QR码的文本值作为参数传递：

import React, { useState } from 'react';
import QRReader from 'react-qr-reader';

function QrScanner() {
  const [qrValue, setQrValue] = useState('');

  const handleScan = data => {
    if (data) {
      setQrValue(data);
    }
  };

  const handleError = err => {
    console.error(err);
  };

  return (
    <div>
      <QRReader
        delay={300}
        onError={handleError}
        onScan={handleScan}
        style={{ width: '100%' }}
      />
      <p>{qrValue}</p>
    </div>
  );
}

在上面的代码中，我们定义了一个QrScanner组件，它包含一个QRReader组件和一个p标签，用于显示扫描到的QR码的文本值。onScan回调将QR码的文本值设置为组件的状态，并将其渲染到页面上。

4. 最后，启动您的React应用程序并使用您的QR扫描仪扫描QR码。QR码的文本值将显示在页面上。

请注意，您需要在使用react-qr-reader之前获取用户的相机权限。您可以使用WebRTC API来访问用户的相机。