динамические c графики по реакции

Question

Мое приложение. js код

/* App.js */
var React = require('react');
var Component = React.Component;
var CanvasJSReact = require('./canvasjs.react');
var CanvasJS = CanvasJSReact.CanvasJS;
var CanvasJSChart = CanvasJSReact.CanvasJSChart;
var updateInterval = 500;
class App extends Component {
    constructor() {
        super();
        this.updateChart = this.updateChart.bind(this);
    }
    componentDidMount(){
        setInterval(this.updateChart, updateInterval);
    }
    updateChart() {
        var dpsColor, dpsTotal = 0, deltaY, yVal;
        var dps = this.chart.options.data[0].dataPoints;
        var chart = this.chart;
        for (var i = 0; i < dps.length; i++) {
            deltaY = Math.round(2 + Math.random() *(-2-2));
            yVal = deltaY + dps[i].y > 0 ? (deltaY + dps[i].y < 100 ? dps[i].y + deltaY : 100) : 0;
            dpsColor = yVal >= 90 ? "#e40000" : yVal >= 70 ? "#ec7426" : yVal >= 50 ? "#81c2ea" : "#88df86 ";
            dps[i] = {label: "Core "+(i+1) , y: yVal, color: dpsColor};
            dpsTotal += yVal;
        }
        chart.options.data[0].dataPoints = dps;
        chart.options.title.text = "CPU Usage " + Math.round(dpsTotal / 6) + "%";
        chart.render();
    }
    render() {
        const options = {
            theme: "dark2",
            title: {
                text: "CPU Usage"
            },
            subtitles: [{
                text: "Intel Core i7 980X @ 3.33GHz"
            }],
            axisY: {
                title: "CPU Usage (%)",
                suffix: "%",
            maximum: 100
            },
            data: [{
                type: "column",
                yValueFormatString: "#,###'%'",
                indexLabel: "{y}",
                dataPoints: [
                    { label: "Core 1", y: 68 },
                    { label: "Core 2", y: 3 },
                    { label: "Core 3", y: 8 },
                    { label: "Core 4", y: 87 },
                    { label: "Core 5", y: 2 },
                    { label: "Core 6", y: 6 }
                ]
            }]
        }
        return (
            <div>
                <CanvasJSChart options = {options}
                     onRef={ref => this.chart = ref}
                />
                {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
            </div>
        );
    }
}
module.exports = App;                              

и ошибка

Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получил: undefined. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод рендеринга App. ▶ 20 стековых фреймов были свернуты.

Answer 1

Если вы хотите использовать ref (this.chart), вы должны сначала создать его в конструкторе:

this.chart = React.createRef();

Вы можете инициализировать его в вашем рендере (эта часть верна):

<CanvasJSChart options = {options}
    onRef={ref => this.chart = ref}
/>

Затем вы можете использовать его позже в своем коде, добавив .current:

this.chart.current