使用ES6类声明时，在render（）方法的return语句中无法访问反应prop值

Question

我是React初学者，在尝试使用React自行编写Peter Beshai's Linked Highlighting代码时遇到问题。

如果我声明propTypes如下：

export default class RadialHeatmap extends React.Component {

  _handleHover(d) {
    ChartAction.highlight(d);
  }


  render() {
    const { data, width, height, radiusKey, colorKey, highlight } = this.props;
    debugger; //debugger A

    // set up scales for radius and colour based on the min/max in the data set
    const strokeWidth = Math.ceil(width / (data.length * 2));
    const r = d3.scaleLinear().domain(d3.extent(data, (d) => d[radiusKey])).range([strokeWidth, (width - strokeWidth) / 2]);
    const color = d3.scaleLinear().domain(d3.extent(data, (d) => d[colorKey])).range(["#edf8b1", "#2c7fb8"]);


    return (
      <div>
        <svg ref="svg" width={width} height={height} className="chart radial-heatmap">
          {data.map((d, i) => {
            debugger; //debugger B
            return (
              <circle className={ classname } key={i} r={r(d[radiusKey])} cx={width / 2} cy={-r(0) / 2} 
                      strokeWidth={strokeWidth} stroke={color(d[colorKey])} 
                      onMouseEnter={ this._handleHover.bind(this, d) }
                      onMouseLeave={ this._handleHover.bind(this, null) }/>
            ); 
          })}
        </svg>
      </div>
    );
  }
};

RadialHeatmap.propTypes= {
  colorKey: React.PropTypes.string, // the key for the colour value
  data: React.PropTypes.array.isRequired,
  height: React.PropTypes.number.isRequired,
  radiusKey: React.PropTypes.string, // the key for the radius value
  width: React.PropTypes.number.isRequired,
  highlight: React.PropTypes.object,
};

RadialHeatmap.defaultProps= {
  radiusKey: "r",
  colorKey: "color"
};


export default RadialHeatmap;

然后我的“突出显示”和“数据”道具可以在调试器A处访问，但不能在调试器B处访问（请参阅代码中的注释以供参考）。

但是如果我使用React.createClass声明它，那么代码可以工作，并且两个调试器都可以访问变量：

const RadialHeatmap = React.createClass({
  propTypes: {
    colorKey: React.PropTypes.string, // the key for the colour value
    data: React.PropTypes.array.isRequired,
    height: React.PropTypes.number.isRequired,
    highlight: React.PropTypes.object,
    radiusKey: React.PropTypes.string, // the key for the radius value
    width: React.PropTypes.number.isRequired
  },

  getDefaultProps() {
    return {
      radiusKey: 'r',
      colorKey: 'color'
    };
  },

  _handleHover(d) {
    // send an action indicating which data point to highlight
    ChartActions.highlight(d);
  },

  render() {
    const { data, width, height, radiusKey, colorKey, highlight } = this.props;
    debugger; //debugger A


    // set up scales for radius and colour based on the min/max in the data set
    const strokeWidth = Math.ceil(width / (data.length * 2));
    const r = d3.scaleLinear().domain(d3.extent(data, (d) => d[radiusKey])).range([strokeWidth, (width - strokeWidth) / 2]);
    const color = d3.scaleLinear().domain(d3.extent(data, (d) => d[colorKey])).range(['#edf8b1', '#2c7fb8']);

    return (
      <div>
        <svg ref='svg' width={width} height={height} className='chart radial-heatmap'>
          {data.map((d, i) => {
            debugger; //debugger B
            // set the highlight class name if this element is highlighted
            const className = highlight && d[radiusKey] === highlight[radiusKey] ? 'highlight' : '';
            return (
              <circle key={i} className={className} r={r(d[radiusKey])} cx={width / 2}
                      cy={-r(0) / 2} strokeWidth={strokeWidth} stroke={color(d[colorKey])}
                      onMouseOver={this._handleHover.bind(this, d)}
                      onMouseOut={this._handleHover.bind(this, null)}
                    />
           );
          })}
        </svg>
      </div>
    );
  }
});

export default RadialHeatmap;

我一直在考虑这一天，似乎无法弄清楚为什么会发生这种情况。

我捣乱了，也许是因为高光是一个物体，因为如果我以同样的方式传递另一个道具，它们是可以接近的。 “数据”道具也会出现同样的问题。由于某种原因，似乎数组和对象在return语句中被区别对待。