JSX元素类型'Line'不是JSX元素的构造函数

时间:2019-07-15 12:04:07

标签: javascript reactjs typescript chart.js chart.js2

我正在尝试使用带有Typescript的chart.js在React中构建应用程序,但是,当尝试渲染折线图时,我在此行得到了上面描述的错误:

<Line data={data}/>.

与此同时,我还收到消息“类型'ChartComponent'缺少类型'ElementClass'的以下属性:渲染,上下文,setState,forceUpdate等3个。”

此外,当我使用yarn start运行应用程序时,该图形将呈现,但仅显示一秒钟,然后崩溃并显示错误消息。

我对Typescript还是很陌生,所以我对该错误的含义感到困惑。任何帮助将不胜感激。

import React, {Component} from 'react';
import Line from "react-chartjs-2"

class LineTest extends React.Component{

    render() {
        const data = {
          labels: [
            '10/04/2018', '10/05/2018', 
            '10/06/2018', '10/07/2018', 
            '10/08/2018', '10/09/2018', 
            '10/10/2018', '10/11/2018', 
            '10/12/2018', '10/13/2018', 
            '10/14/2018', '10/15/2018'
          ],
          datasets: [
            {
              label: 'Temperature',
              data: [22,19,27,23,22,24,17,25,23,24,20,19],
              fill: false,          
              borderColor: 'green'  
            }
          ]
        }

        return (
          <div className="App">
            <div>
              <Line data={data}/>
            </div>
          </div>
        );
      }
}

export default LineTest

1 个答案:

答案 0 :(得分:1)

Line组件由react-chartjs-2导出为命名导出。您需要通过其名称导入它:

import {Line} from 'react-chartjs-2';

实时示例:

Edit laughing-cdn-3qp5q