在React项目中使用Qrcode.react并实现下载以及刷新功能

1. 安装qrcode.react插件

yarn add qrcode.react
// or 
npm install qrcode.react --save

 2. 使用qrcode.react插件生成二维码

// 引入二维码生成组件
import QRCode from 'qrcode.react';

<QRCode
    id="qrCode"
    value="https://www.jianshu.com/u/992656e8a8a6"
    size={200} // 二维码的大小
    fgColor="#000000" // 二维码的颜色
    style={{ margin: 'auto' }}
    imageSettings={{ // 二维码中间的logo图片
        src: 'logoUrl',
        height: 100,
        width: 100,
        excavate: true, // 中间图片所在的位置是否镂空
     }}
 />                

 下载二维码

 const actions = [
    {
      text: '保存到手机',
      key: 'copy',
      onClick: () => {
        const canvasImg = document.getElementById('qrCode'); // 获取canvas类型的二维码
        // 给保存到手机的a标签添加id
        document
          .getElementsByClassName('adm-plain-anchor')[0]
          .setAttribute('id', 'down_link');
        const downLink = document.getElementById('down_link');
        // 二维码格式
        downLink.href = canvasImg.toDataURL('image/png');
        downLink.download = '二维码'; // 图片name
        setVisible(false);
      },
    },
    {
      text: '重置二维码',
      key: 'edit',
      onClick: () => {
        // 在这里更新二维码的值，例如从服务器获取新的URL  在要显示的内容后面加上?key=${qrCodeKey}触发
        const newQRCodeValue = `https://www.example.com/new?key=${qrCodeKey}`;
        setQRCodeValue(newQRCodeValue);
        setQRCodeKey((prevKey) => prevKey + 1);
      },
    },
  ];

// 导航栏图标
  const right = (
    <div style={{ fontSize: 24 }}>
      <MoreOutline onClick={() => setVisible(true)} fontSize={40} />
      <ActionSheet
        extra="请选择你要进行的操作"
        cancelText="取消"
        visible={visible}
        actions={actions}
        onClose={() => setVisible(false)}
      />
    </div>
  );

  // 存放动作面板状态值
  const [visible, setVisible] = useState(false);
  // 存放二维码要展示的文本或者链接地址url地址
  const [qrCodeValue, setQRCodeValue] = useState(
    'https://juejin.cn/post/6951282142903173134'
  );
  // 每次点击都可以刷新二维码用key值变化来触发
  const [qrCodeKey, setQRCodeKey] = useState(0);
// 导航点击返回
const back = () =>
  Toast.show({
    content: '点击了返回区域',
    duration: 1000,
  });

官网地址:qrcode.react - npm

在上面的代码中，我们使用了React的useState钩子来创建一个名为qrCodeValue的状态变量，用于存储二维码的值。当点击"刷新二维码"按钮时，handleRefreshQRCode函数会被调用，它会更新qrCodeValue的值为新的URL。这将触发React重新渲染组件并生成一个新的二维码。

请注意，上述示例假设你已经将QRCodeGenerator组件集成到你的应用程序中，并使用适当的方式进行渲染。你需要将按钮的点击事件处理程序（handleRefreshQRCode）与你的应用程序中的实际刷新逻辑进行集成。

如果要实现每次点击都可以刷新二维码则：

在上面的代码中，我们使用了一个名为qrCodeKey的状态变量来存储一个随机值。每当点击"刷新二维码"按钮时，handleRefreshQRCode函数会增加qrCodeKey的值，从而更新状态并触发重新渲染。

二维码的值通过将qrCodeKey添加到URL中来动态生成。这将导致React认为每次更新二维码值时，它都是一个新的值，从而重新渲染并生成新的二维码。

请注意，我们在QRCode组件中使用了key={qrCodeKey}属性，以确保每次qrCodeKey值更新时，React会创建一个新的QRCode组件实例。

这样，每次点击按钮都会刷新二维码，因为它们都有一个不同的qrCodeKey值，从而生成不同的二维码。