百度,google搜了一下,發現不少教怎麼用的,就是沒有封裝組件的.react
實際這個東西,用起來仍是很簡單的.bash
今天正好封裝了個組件.svg
今天算是寫react的第三個月了.react仍是比較好上手的.ui
幾種應用:this
這種是JQuery的.明顯不是想要的,略過google
這種用classname找的方法.感受很差.spa
最後這個纔像是須要的.code
/**
* 簡單生成條形碼
* {
* width: 2,//較細處條形碼的寬度
* height: 100, //條形碼的寬度,無高度直接設置項,由位數決定,能夠經過CSS去調整,見下
* quite: 10,
* format: "CODE128",
* displayValue: false,//是否在條形碼下方顯示文字
* font:"monospace",
* textAlign:"center",
* fontSize: 12,
* backgroundColor:"",
* lineColor:"#000"//條形碼顏色
* }
*/
class SimpleBarcode extends Component {
componentDidMount() {
this.createBarcode();
}
componentWillReceiveProps(nextProps) {
if (this.props !== nextProps) {
this.createBarcode();
}
}
createBarcode = () => {
if (!this.barcode) return;
const {
width = 1, height = 35, margin = 0, label, displayValue = true,
} = this.props;
if (!label) {
return;
}
Barcode(this.barcode, label, {
displayValue, // 是否由Barcode顯示二維碼下面的值
width, // 每條線的寬度
height, // 高度
margin, //邊距
});
};
render() {
const {
labelClassName, label, labelStyle, className, style, displayValue = true,
} = this.props;
return (
<div className={className} style={style}>
<svg
ref={(ref) => {
this.barcode = ref;
}}
/>
{displayValue ? null : <p className={labelClassName} style={labelStyle}>{label}</p>} // 自定義樣式的值顯示
</div>
);
}
}
複製代碼
<SimpleBarcode
label={123123}
height="45"
width="1"//這裏只能是大於1的整數
/>
複製代碼
期待你的評論,點贊component