react+typescript 封装条形码组件Barcode

Barcode.tsx 组件代码

import React, { useRef, useEffect } from 'react';

const JsBarcode = require('jsbarcode');

interface BarcodeProps {
  value?: string;
  height?: number;
}

const Index: React.FC<BarcodeProps> = ({ value, height = 40 }) => {
  const ref = useRef<SVGSVGElement>(null);

  useEffect(() => {
    if (value && ref.current)
      JsBarcode(ref.current, value, {
        height,
      }).render();
  }, [value]);

  return <svg ref={ref} />;
};

export default Index;

使用Barcode组件

<Barcode value={"test"} />

效果如下图

条形码效果图