react+typescript 封装二维码组件QRCode

QRCode.tsx 组件代码

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

const QRCode = require('qrcode');

export interface QRCodeProps {
  value?: string;
}

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

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

  return <canvas ref={ref}></canvas>;
};

export default Index;

使用QRCode组件

<QRCode value={"test"} />

效果图如下