Reactjs TypeError:无法读取未定义的属性“CreateElements”

我本来想在我的React应用程序中放置一个用d3制作的条形图，但当我尝试调用const svgCanvas=d3.selectthis.canvas.appendsvg时，我遇到了一个错误，这使我认为我的this.canvas ref设置错误

当我把

console.log(this.canvas);
console.log(d3.select(this.canvas));

在抛出错误的命令之前，以下是输出：

{current: div}
  current: null
  __proto__: Object

以下是从另一个文件调用的条形图组件

import React from 'react';

import * as d3 from 'd3';

class BarChart extends React.Component {
  public canvas: any;

  public constructor(props: any) {
    super(props);
    this.canvas = React.createRef();
  }

  public componentDidMount() {
    const data = [2, 4, 2, 6, 8];
    this.drawBarChart(data);
  }

  public drawBarChart(data: number[]) {
    const canvasHeight = 400;
    const canvasWidth = 600;
    const scale = 20;
    const help = d3.select(this.canvas);
    const svgCanvas = d3.select(this.canvas)
      .append("svg") // ERROR RAISED ON THIS LINE
      .attr("width", canvasWidth)
      .attr("height", canvasHeight)
      .style("border", "1px solid black");
    console.log(svgCanvas);
    svgCanvas.selectAll("rect")
      .data(data).enter()
      .append("rect")
      .attr("width", 40)
      .attr("height", ((datapoint: number) => datapoint * scale))
      .attr("fill", "orange")
      .attr("x", (datapoint: number, iteration: number) => iteration * 45)
      .attr("y", ((datapoint: number) => canvasHeight - datapoint * scale));
  }

  public render() {
    return (
      <div ref={this.canvas} />
    );
  }
}

export default BarChart;

这本应生成教程中所示的条形图，但我得到的却是TypeError:无法读取带有.append'svg'行中未定义的属性'CreateElements'

---

编辑：控制台日志屏幕截图位于

通过将d3.selectthis.canvas更改为d3.selectthis.canvas.current，我可以避免此错误

import React from 'react';

import * as d3 from 'd3';

class BarChart extends React.Component {
  public canvas: any;

  public constructor(props: any) {
    super(props);
    this.canvas = React.createRef();
  }

  public componentDidMount() {
    const data = [2, 4, 2, 6, 8];
    this.drawBarChart(data);
  }

  public drawBarChart(data: number[]) {
    const canvasHeight = 400;
    const canvasWidth = 600;
    const scale = 20;
    const help = d3.select(this.canvas);
    const svgCanvas = d3.select(this.canvas)
      .append("svg") // ERROR RAISED ON THIS LINE
      .attr("width", canvasWidth)
      .attr("height", canvasHeight)
      .style("border", "1px solid black");
    console.log(svgCanvas);
    svgCanvas.selectAll("rect")
      .data(data).enter()
      .append("rect")
      .attr("width", 40)
      .attr("height", ((datapoint: number) => datapoint * scale))
      .attr("fill", "orange")
      .attr("x", (datapoint: number, iteration: number) => iteration * 45)
      .attr("y", ((datapoint: number) => canvasHeight - datapoint * scale));
  }

  public render() {
    return (
      <div ref={this.canvas} />
    );
  }
}

export default BarChart;