未捕获的ReferenceError：未定义“ dragLayer”

Question

我已经使用react-plotly.js实现了散点图。在图表上，我有一个zoomable属性，该属性允许用户通过在图表区域上拖动来进行缩放。由于此属性，图表区域上的光标始终为<->形状。当用户将鼠标悬停在数据点上时，我想将光标更改为“指针”。我找到了这个Codepen链接，它为我的期望行为提供了解决方案。
https://codepen.io/destrada/pen/perVON

但是，当我尝试将链接中建议的解决方案应用于我的代码时，它将引发以下错误：

我实施建议的解决方案的方式是：

<Plot
    data={this.prepData(this.state.chartData)}
    onHover={(data) => {
        dragLayer.style.cursor='pointer'}}/>

我不是正确调用dragLayer函数吗？为什么dragLayer无法被绘图识别？请帮忙。

Answer 1

dragLayer似乎是HTML元素而不是函数。您遇到的问题很可能是由于您定义dragLayer的位置。来自codepen示例的定义：

dragLayer = document.getElementsByClassName('nsewdrag')[0]

呈现dragLayer组件时，似乎上面的Plot定义超出了范围。

您似乎正在使用React类组件，因此可以执行以下操作：

class MyPlot extends Component {
  // ...

  componentDidMount() {
    this.dragLayer = document.getElementsByClassName("nsewdrag")[0];
  }

  // ...

  render() {
    // ...
    return (
      <Plot
        data={this.prepData(this.state.chartData)}
        onHover={data => {
          this.dragLayer.style.cursor = "pointer";
        }}
      />
    );
  }
}