QuaggaJS+react读取多种条码代码示例

以下是一个使用QuaggaJS和React读取多种条码的示例：

首先，需要安装QuaggaJS和React：

npm install quagga react react-dom

然后，创建一个名为`BarcodeScanner.js`的组件：

import React, { Component } from 'react';
import Quagga from 'quagga';

class BarcodeScanner extends Component {
  componentDidMount() {
    Quagga.init({
      inputStream: {
        name: "Live",
        type: "LiveStream",
        target: document.querySelector('#camera')    // 相机视频元素的ID，这里使用了一个div元素
      },
      decoder: {
        readers: [
          "code_128_reader",
          "ean_reader",
          "ean_8_reader",
          "code_39_reader",
          "code_39_vin_reader",
          "codabar_reader",
          "upc_reader",
          "upc_e_reader",
          "i2of5_reader"
        ],
        debug: {
          drawBoundingBox: true,
          showFrequency: false,
          drawScanline: true,
          showPattern: false
        }
      }
    }, function(err) {
        if (err) {
            console.log(err);
            return
        }
        console.log("Initialization finished. Ready to start");
        Quagga.start();
    });

    Quagga.onDetected(this.onDetected);
  }

  componentWillUnmount() {
    Quagga.offDetected(this.onDetected);
    Quagga.stop();
  }

  onDetected = (result) => {
    this.props.onDetected(result);
    Quagga.stop();
  }

  render() {
    return (
      <div id="camera"></div>
    );
  }
}

export default BarcodeScanner;

在这个组件中，我们使用`Quagga.init()`初始化QuaggaJS，指定输入流和解码器，然后使用`Quagga.start()`开始扫描条码。当扫描到条码时，调用`onDetected()`回调函数，将识别结果作为参数传递给父组件。

在父组件中，我们可以使用以下代码来处理识别结果：

import React, { Component } from 'react';
import BarcodeScanner from './BarcodeScanner';

class App extends Component {
  state = {
    code: null
  };

  handleScan = (result) => {
    this.setState({
      code: result.codeResult.code
    });
  }

  render() {
    return (
      <div>
        <BarcodeScanner onDetected={this.handleScan} />
        <p>Detected code: {this.state.code}</p>
      </div>
    );
  }
}

export default App;

在这个父组件中，我们使用`<BarcodeScanner>`组件来扫描条码，然后在`handleScan()`函数中将识别结果保存到状态中，最后在页面上显示出来。

注意：在使用QuaggaJS时，需要在HTTPS环境下才能访问摄像头。在本地开发环境中，可以使用`https-localhost`模块来启动一个本地HTTPS服务器。