attachRefs 问题。Minified React error 。

[shenqihui]

提示压缩了之后的错误。错误如下，

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;

[cssivision]

may be you can pull a pr to fix this