解决React -qrCode生成二维码不能微信识别问题

一般的网上解决方法特别多，但大多数都是大同小异，关于react-es6的框架搭语法很少见，下面是React中处理二维码触发微信识别的解决方法：

import React, { useState, useRef, useEffect } from 'react';
import { useWindowSize } from 'react-use';
import QRCodeReact from 'qrcode.react';
import icon from '@/assets/images/obbycode-app.png';



const QRcode = ({ href, codeSize = 0.3, iconSize = 0.08 }) => {
  const [imgSrc, setImgSrc] = useState('');

  useEffect(() => {
    let canvas = document.getElementById('qrcode-canvas');
    let data = canvas.toDataURL('image/png');
    setImgSrc(data);
    canvas = null
  }, []);

  const { width } = useWindowSize();

  const wrapperStyle = {
    position: 'relative'
  }

  const qrcodeImgStyle = {
    border: '4px solid #fff',
    height: width * codeSize,
    width: width * codeSize,
  }

  const iconStyle = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    border: '2px solid #fff',
    height: width * iconSize,
    width: width * iconSize,
  }

  return (
    <div style={wrapperStyle}>
      <img src={imgSrc} alt="" style={qrcodeImgStyle} />
      <img src={icon} alt="icon" style={iconStyle} />
      <QRCodeReact
        style={{ display: 'none' }}
        id="qrcode-canvas"
        className="qrcode"
        value={href}
        level="M"
        size={width * codeSize}
      // imageSettings={{
      //   src: require('@/assets/images/obbycode-app.png'),
      //   x: null,
      //   y: null,
      //   height: width * iconSize,
      //   width: width * iconSize,
      //   excavate: true
      // }}
      />
    </div>
  );
}

export default QRcode;