Javascript 使用ES6类声明时，React prop值在render（）方法的返回语句中不可访问

我是一个React初学者，在尝试自己编写React代码时遇到了一个问题

如果我像这样声明proptype：

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;

导出默认类RadialHeatmap扩展React.Component{
_手悬停（d）{
图表行动。突出显示（d）；
}
render（）{
const{data，width，height，radiusKey，colorKey，highlight}=this.props；
调试器；//调试器A
//根据数据集中的最小/最大值设置半径和颜色比例
常数strokeWidth=Math.ceil（宽度/（数据长度*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”）；
返回(
{data.map（（d，i）=>{
调试器；//调试器B
返回(
); 
})}
);
}
};
径向热图。propTypes={
colorKey:React.PropTypes.string，//颜色值的键
数据：React.PropTypes.array.isRequired，
高度：React.PropTypes.number.isRequired，
radiusKey:React.PropTypes.string，//半径值的键
宽度：React.PropTypes.number.isRequired，
突出显示：React.PropTypes.object，
};
RadialHeatmap.defaultProps={
半径键：“r”，
颜色键：“颜色”
};
导出默认的径向热图；

然后，我的“突出显示”和“数据”道具可以在调试器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;

const RadialHeatmap=React.createClass({
道具类型：{
colorKey:React.PropTypes.string，//颜色值的键
数据：React.PropTypes.array.isRequired，
高度：React.PropTypes.number.isRequired，
突出显示：React.PropTypes.object，
radiusKey:React.PropTypes.string，//半径值的键
宽度：React.PropTypes.number.isRequired
},
getDefaultProps（）{
返回{
radiusKey:'r'，
颜色键：“颜色”
};
},
_手悬停（d）{
//发送指示要突出显示哪个数据点的操作
图表行动。突出显示（d）；
},
render（）{
const{data，width，height，radiusKey，colorKey，highlight}=this.props；
调试器；//调试器A
//根据数据集中的最小/最大值设置半径和颜色比例
常数strokeWidth=Math.ceil（宽度/（数据长度*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']）；
返回(
{data.map（（d，i）=>{
调试器；//调试器B
//如果此元素高亮显示，则设置高亮显示类名
const className=高亮显示和&d[radiusKey]==高亮显示[radiusKey]？“高亮显示”：“；
返回(
);
})}
);
}
});
导出默认的径向热图；

我已经想了一天了，似乎不明白为什么会这样

---

我到处乱搞，可能是因为高光是一个对象，因为如果我以同样的方式通过另一个道具，它们是可访问的。同样的问题也发生在“数据”道具上。使数组和对象在return语句中似乎由于某种原因而受到不同的处理。

这只是调试器的行为，至少在最新的基于chromium的浏览器中是这样，似乎它优化了作用域并将其缩小到当前作用域中的“已使用”变量，因此调试器不会看到它们：try

debugger；（数据，突出显示）哇。这是可怕的，同时也让人恼火。谢谢！