Reactjs 未捕获的引用错误：'；dragLayer'；没有定义

我已经使用react-plotly.js实现了一个散点图。在图表上，我有一个可缩放属性，允许用户通过拖动图表区域进行缩放。由于此属性，图表区域上的光标始终是形状。当用户将鼠标悬停在数据点上时，我想将光标更改为“指针”。我找到了这个代码笔链接，它为我想要的行为提供了解决方案。

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

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

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

{
dragLayer.style.cursor='pointer'}}/>

---

我没有正确调用dragLayer函数吗？为什么dragLayer没有被plotly认可？请提供帮助。

dragLayer

似乎是一个HTML元素，而不是一个函数。您遇到的问题很可能是由于您在哪里定义了

dragLayer

。代码笔示例中的定义：

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

在渲染

绘图

组件时，上面的

dragLayer

定义似乎超出了范围

看起来您正在使用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";
        }}
      />
    );
  }
}

类MyPlot扩展组件{
// ...
componentDidMount（）{
this.dragLayer=document.getElementsByClassName（“nsewdrag”）[0]；
}
// ...
render（）{
// ...
返回(
{
this.dragLayer.style.cursor=“pointer”；
}}
/>
);
}
}

嘿，接球很棒！这是由于这件事的范围。虽然把它放在componentDidMount（）中对我不起作用。我不得不把它放在悬停事件呼叫下。但是谢谢：）