react+typescript 封装二维码组件QRCode

QRCode.tsx 组件代码

import React, { useRef, useEffect } from 'react';

const QRCode = require('qrcode');

export interface QRCodeProps {
  value?: string;
}

const Index: React.FC = ({ value }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (value) QRCode.toCanvas(ref.current, value);
  }, [value]);

  return ;
};

export default Index;

使用QRCode组件

效果图如下

二维码效果图