我想 使用ChartJS在REact JS中一起绘制实线和虚线 ，例如“ https://jsfiddle.net/3gxjfndm/3/”。由于无法获取上下文（ctx），我无法理解如何在我的react js文件中扩展图表。我了解基本概念，但是无法在我的React Component上实现。

以下是我的折线图实现，我认为这是一个BAD实现。

import Chart from 'chart.js';

class LineChart extends React.Component {
    constructor(props) {
        super(props);
        this.canvasRef = React.createRef();
    }

  componentDidmount() {
    this.myChart = new Chart(this.canvasRef.current,{
        type: 'line',options: {
            responsive: true,tooltips: {
                mode: 'index',intersect: false,},hover: {
                mode: 'nearest',intersect: true
            },legend:{
                display:false,scales: {
                x: {
                    display: true,scaleLabel: {
                        display: true,labelString: 'Month'
                    }
                },y: {
                    display: true,labelString: 'Value'
                    }
                }
            }
        },data: {
            labels: ['A','B','C','D','E','F','G','H','I','J','K'],datasets: [{
                label: "My First dataset",data: [1,8,3,4,2,4],borderColor: '#66f',borderDash: [20,30],pointBackgroundColor: "transparent"
            },{
                label: "My Dotted dataset",data: [null,null,7,5,2],pointBackgroundColor: "transparent"
            }]
        }
        });
    }


    render() {
        return (
             <div classname="chart-section">
                <div classname="chart-body">
                    <canvas ref={this.canvasRef} />
                </div>
            </div>
        ) 
    }
}

export default LineChart;```