ad-manage/src/pages/launchSystemV3/components/QrCode/index.tsx

import { Popover } from "antd"
import React, { useEffect, useRef, useState } from "react"
import QRCode from 'qrcodejs2'

interface Props {
    url: string
}
const QrCode: React.FC<Props> = ({ url }) => {

    /********************************/
    const ref = useRef(null)
    const [visible, setVisible] = useState<boolean>(false)
    const [qr, setQr] = useState<any>()
    /********************************/

    useEffect(() => {
        if (ref.current && url && visible && !qr) {
            let a = new QRCode(ref.current, {
                text: url,
                width: 150,
                height: 150
            })
            setQr(a)
        }
    }, [ref, visible])

    return <Popover
        content={<div ref={ref}></div>}
        onVisibleChange={(e) => {
            setVisible(e)
        }}
    >
        <a style={{ fontSize: 12 }}>预览</a>
    </Popover>
}

export default React.memo(QrCode)