react中二维码生成

参考文档:

https://blog.csdn.net/weixin_45022563/article/details/124843593

 

awesomeqr/react

案例：

注意需要给父级div设置高宽

下载：

yarn add @awesomeqr/react

# OR using npm

npm install --save @awesomeqr/react

import React from 'react'
import { AwesomeQRCode } from "@awesomeqr/react";//引入二维码生成库

export default function CollectApp() {
    return (
        <div style={{ "height": "400px", "width": "100%" }}>
            线上采集app下载2
            <AwesomeQRCode
                options={{
                    text: "测试测试测试，这的app下载内容,测试测试测试，这的app下载内容这的app下载内容测试测试测试，这的app下载内容",//二维码内容
                    // size: 100,//大小
                    logoImage: require("../../../../media/picture/jfjyewm.png"),//二维码中间的图片
                    logoScale: 0.3, // 二维码中间logo大小
                    logoCornerRadius: 0.3, // 二维码中间logo圆角
                    // colorLight: "rgba(159,255,255,0)", // 二维码背景颜色
                }}
                onStateChange={(state) => {
                    switch (state) {
                        case "working":
                            //工作 ...
                            break;
                        case "idle":
                            // 闲置...
                            break;
                    }
                }}
            />
        </div>
    )
}