使用qrcode.react动态自动生成二维码_qrcode.react 生成文本二维码

qrcode.react 是一个基于 React 的二维码生成库，它提供了一种简单的方式来在 React 应用中生成二维码。

使用 qrcode.react 可以轻松地将二维码集成到 React 组件中。它提供了一个名为 QRCode 的组件，你可以在你的代码中使用它来生成二维码。

以下是一个使用 qrcode.react 的示例：

安装：

npm install qrcode.react

或

yarn add qrcode.react

然后，在你的代码中引入 QRCode 组件：

import QRCode from 'qrcode.react'
 
export const QrcodeComponent=()=>{
  //需要转为二维码的h5链接
  const [url, setUrl] = useState('')
  //随机数id
  const [randomId, setRandomId] = useState<string>('')  
  //生成的二维码图片链接
  const [qrcodeUrl, setQrcodeUrl] = useState('')
  
  //生成随机数id
  const uuid=()=>{
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
      const r = (Math.random() * 16) | 0
      const v = c === 'x' ? r : (r & 0x3) | 0x8
      return v.toString(16)
    })
  }
 
  useEffect(() => {
    setRandomId(uuid())
    setUrl('https://example.com')
  }, [])
 
  useEffect(() => {
    //获取canvas类型的二维码
    const canvasImg = document.getElementById(randomId) as HTMLCanvasElement 
    //将canvas对象转换为图片的data url
    setQrcodeUrl(canvasImg?.toDataURL('image/png')) 
  }, [randomId])
 
return (
  <div style={{ position: 'absolute', opacity: '0', zIndex: '-100' }}>
    {url && randomId && (
        <QRCode
         id={randomId}
         value={url}
         size={200} // 二维码的大小
         fgColor="#000000" // 二维码的颜色
         style={{ margin: 'auto', backgroundColor: 'white', padding: '10px' }}
         />
     )}
  </div>
  <img src={qrcodeUrl}/>
);
}
 
 

根据某个h5链接，可拼接参数，动态生成二维码的图片链接，扫描该二维码，可以根据参数跳转对应地址

注意：这个QRCode的组件id需要唯一，否则会出现问题，已踩过坑，此处，url是固定的，不涉及复杂情形，可以不用生成randomId，写固定的id就好了