Javascript JSX元素类型';第'行;不是JSX元素的构造函数

Javascript JSX元素类型';第'行;不是JSX元素的构造函数,javascript,reactjs,typescript,chart.js,chart.js2,Javascript,Reactjs,Typescript,Chart.js,Chart.js2,我正在尝试使用chart.js和Typescript在React中构建应用程序,但是在尝试渲染折线图时,我在这一行中遇到了上面描述的错误: <Line data={data}/>. 。 除此之外,我还收到消息“类型'ChartComponent'缺少类型'ElementClass'中的以下属性”:render、context、setState、forceUpdate和其他3个。” 此外,当我使用Thread start运行应用程序时,图形将呈现,但仅在出现错误消息之前的一瞬间呈现

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

<Line data={data}/>.
除此之外,我还收到消息“类型'ChartComponent'缺少类型'ElementClass'中的以下属性”:render、context、setState、forceUpdate和其他3个。”

此外,当我使用Thread 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
import React,{Component}来自'React';
从“react-chartjs-2”导入行
类LineTest扩展了React.Component{
render(){
常数数据={
标签:[
'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'
],
数据集:[
{
标签:“温度”,
数据:[22,19,27,23,22,24,17,25,23,24,20,19],
填充:假,
边框颜色:“绿色”
}
]
}
返回(
);
}
}
导出默认行测试

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

import {Line} from 'react-chartjs-2';
实例:


错误信息在哪里?
code
我不擅长打字,但因为
而出现了这样的问题在导入处签名<代码>从“react-chartjs-2”导入行尝试放置并避免分号行在“react-chartjs-2”中命名为export。因此,在importb中使用像{Line}这样的大括号代替Line,这两个大括号都不能解决问题error@jamesheaton您确定已重建应用程序吗?重新启动监视任务。您可以在我更新答案时使用的代码沙箱中看到您的确切代码。此外,您还必须作为依赖项安装
chart.js
Typescript@jamesheaton1.您的示例也是纯javascript和2。这并不重要,因为typescript是javascript的超集,所以有效的javascript也是有效的typescript。Typescript只是为了静态类型安全。看看代码沙盒。我复制了你的精确代码,它工作得非常好。如果我将文件扩展名改为.js而不是.tsx,错误就会消失,所以这显然与Typescript@jamesheaton那么这可能是由于不兼容的typescript版本或配置问题造成的。但是我发布的代码是有效的。你看到的是一个警告,不应该阻止你的应用程序正常工作。