---

前言

今天要封裝的Qrcode 組件，是通過傳入的信息，繪制在二維碼上，可用于很多場景，如區塊鏈項目中的區塊顯示交易地址時就可以用到。

Qrcode組件

1. 功能分析

（1）通過傳入text屬性，表示要繪制的信息
（2）使用useEffect，監聽數據，當發生變化時重新繪制二維碼
（3）支持傳入 className 自定義類名來修改樣式

2. 代碼+詳細注釋

// @/components/Qrcode/index.tsx
import { useEffect, useRef, FC } from "react";
import QRCode from "qrcode";
import { ReactComponent as QrCodeIcon } from "./assets/qrcode.svg";
import { QrcodeContainer } from "./styled";
import classNames from "classnames";// 組件的屬性類型
type Props = {text: string; // 要繪制的二維碼內容className?: string; // 自定義的類名
};const Qrcode: FC<Props> = ({ text, className }) => {const qrRef = useRef<HTMLCanvasElement | null>(null);useEffect(() => {// 獲取canvas元素refconst cvs = qrRef.current;// 如果沒有 canvas 元素的引用，則直接返回if (!cvs) return;// 調用 QRCode.toCanvas 方法，將text繪制到canvas上QRCode.toCanvas(cvs,text,{margin: 5, // 設置二維碼周圍的邊距errorCorrectionLevel: "H", // 設置二維碼的容錯級別width: 144, // 設置二維碼的寬度},(err) => {if (err) {console.error(err);}});}, [qrRef, text]); // 監聽qrRef和text，當發生變化時重新繪制二維碼return (<QrcodeContainer className={classNames(className)}><label><QrCodeIcon /></label><canvas ref={qrRef} className={classNames("qrcode")} /></QrcodeContainer>);
};export default Qrcode;
------------------------------------------------------------------------------
// @/components/Qrcode/styled.tsx
import styled from "styled-components";
import variables from "@/styles/variables.module.scss";
export const QrcodeContainer = styled.div`width: 100%;position: relative;cursor: pointer;label {display: flex;align-items: center;cursor: pointer;}.qrcode {top: calc(100% + 10px);box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}&::after {top: calc(100% - 15px);content: "";width: 5px;height: 5px;border: 10px solid transparent;border-bottom: 10px solid #fff;filter: drop-shadow(0 -5px 5px rgb(0, 0, 0, 0.1));}.qrcode,&::after {display: none;position: absolute;left: 50%;transform: translateX(-50%);}&:hover,&:focus-within {.qrcode,&::after {display: block;}}@media (max-width: ${variables.mobileBreakPoint}) {.qrcode,&::after {left: 0;}}
`;

3. 使用方式

// 引入組件
import Qrcode from "@/components/Qrcode";
// 使用
const address = "http://test-address?block=XXXX"
<Qrcode text={ address } />

4. 效果展示(pc端 / 移動端)

---

總結

下一篇講【全局常用組件Echarts封裝】。關注本欄目，將實時更新。