attachRefs 问题。Minified React error 。 #7
Description
提示压缩了之后的错误。错误如下，
Uncaught Error: Minified React error #119; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=119 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
错误描述的详情： http://facebook.github.io/react/docs/error-decoder.html?invariant=119
看样子，生产代码肯定是压缩的，问题感觉没法解决的。
所以我看着代码直接改成自己的版本了。
因为我的项目中大量使用 lodash ，而且没有使用 React.createClass 写 propTypes ，因此直接使用 lodash 判断 shouldComponentUpdate 了，另外习惯问题，没使用 React.createClass ，而是使用了 class Component extends React.Component 形式，所以打包的时候需要使用 babel 另行打包。
import React from 'react';
import _ from 'lodash';
import qr from 'qr.js';
function getBackingStorePixelRatio(ctx) {
return (
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1
);
}
const defaultProps = {
size: 128,
bgColor: '#FFFFFF',
fgColor: '#000000',
value: 'http://facebook.github.io/react/',
};
class Component extends React.Component {
constructor(props) {
super(props);
this.state = {};
debugAdd('qrcode', this);
}
componentWillMount = () => {}
componentDidMount = () => {
this.update();
}
shouldComponentUpdate = (nextProps) => {
return !_.isEqual(nextProps, this.props);
}
componentDidUpdate = () => {
this.update();
}
utf16to8 = (str) => {
let out;
const len = str.length;
let c;
out = '';
for (let i = 0; i < len; i += 1) {
c = str.charCodeAt(i);
if ((0x0001 <= c) && (0x007F >= c)) {
out += str.charAt(i);
}
else if (0x07FF < c) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
canvasRef = (canvas) => {
this.canvas = canvas;
}
update = () => {
window.console.log('qrcode update');
const { value, size, fgColor, bgColor, logo, logoWidth, logoHeight } = Object.assign({}, defaultProps, this.props);
const qrcode = qr(this.utf16to8(value));
debugAdd('qrcode_qrcode', qrcode);
const canvas = this.canvas;
const ctx = canvas.getContext('2d');
const cells = qrcode.modules;
const tileW = size / cells.length;
const tileH = size / cells.length;
const scale = window.devicePixelRatio / getBackingStorePixelRatio(ctx);
canvas.height = canvas.width = size * scale;
ctx.scale(scale, scale);
cells.forEach((row, rdx) => {
row.forEach((cell, cdx) => {
ctx.fillStyle = cell ? fgColor : bgColor;
const w = (Math.ceil((cdx + 1) * tileW) - Math.floor(cdx * tileW));
const h = (Math.ceil((rdx + 1) * tileH) - Math.floor(rdx * tileH));
ctx.fillRect(Math.round(cdx * tileW), Math.round(rdx * tileH), w, h);
}, this);
}, this);
if (logo) {
const image = document.createElement('img');
image.onload = () => {
const dwidth = logoWidth || size * 0.2;
const dheight = logoHeight || (image.height / image.width) * dwidth;
const dx = (size - dwidth) / 2;
const dy = (size - dheight) / 2;
image.width = dwidth;
image.height = dheight;
ctx.drawImage(image, dx, dy, dwidth, dheight);
};
image.src = logo;
}
}
render() {
const { size = 128 } = Object.assign({}, defaultProps, this.props);
return (<canvas ref={this.canvasRef} style={{ height: size, width: size }} height={size} width={size} />);
}
}
export default Component;