index.jsx

import React, {
  useState,
  useImperativeHandle,
  forwardRef,
  useRef,
} from "react";
import styles from "./index.less";
import { QRCodeSVG } from "qrcode.react";

let PrintQrCode = forwardRef(({ selectedItems }, ref) => {
  let printRef = useRef();
  useImperativeHandle(ref, () => ({
    dom: printRef,
  }));

  return (
    <div className={styles.qrcode} ref={printRef}>
      {selectedItems.map((item, i) => {
        return (
          <div key={item.id}>
            <ul>
              <li>
                <p>
                  <b>物料编码: </b> <span>{item.materieCode}</span>
                </p>
                <p>
                  <b>物料名称: </b> <span>{item.materieName}</span>
                </p>
                <p>
                  <b>批次号/SN号: </b> <span>{item.materieControlNo}</span>
                </p>
                <p>
                  <b>供应商: </b> <span>{item.supplierName}</span>
                </p>
              </li>
              <li>
                <QRCodeSVG value={item.id} size={350}></QRCodeSVG>
              </li>
            </ul>
          </div>
        );
      })}
    </div>
  );
});

export { PrintQrCode };