JSX 元素类型“Line”不是 JSX 元素的构造函数答案

【问题标题】：JSX element type 'Line' is not a constructor function for JSX elementsJSX 元素类型“Line”不是 JSX 元素的构造函数
【发布时间】：2019-11-24 03:14:01
【问题描述】：

我正在尝试使用带有 Typescript 的chart.js 在 React 中构建应用程序，但是在尝试渲染折线图时，我在此行中收到上述错误：

<Line data={data}/>.

除此之外，我还收到消息“类型 'ChartComponent' 缺少类型 'ElementClass' 的以下属性：render、context、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

【问题讨论】：

错误信息在哪里？
code
我不擅长打字，但是因为;在导入时签名而遇到了这样的问题。 import Line from "react-chartjs-2";尽量放，不要避免分号
行在“react-chartjs-2”中被命名为导出。所以在导入中使用像 {Line} 这样的花括号而不是 Line
这两个都不能解决错误

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

【解决方案1】：

Line 组件由react-chartjs-2 导出为命名导出。您需要按名称导入它：

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

现场示例：

【讨论】：

@jamesheaton 你确定你已经重建了你的应用程序吗？重新启动监视任务。您可以看到您的确切代码在我更新答案的代码沙箱中有效。此外，您还必须安装 chart.js 作为依赖项。
你写的是Javascript，不是Typescript
@jamesheaton 1. 您的示例也是纯 javascript 和 2. 这无关紧要，因为 typescript 它是 javascript 的超集，因此有效的 javascript 也是有效的 typescript。 Typescript 仅用于静态类型安全。查看代码框。我复制了你的确切代码，它运行良好。
如果我将文件扩展名更改为 .js 而不是 .tsx 错误就会消失，因此很明显它与 Typescript 有关
@jamesheaton 那么这可能是打字稿版本不兼容或配置问题的问题。但是我发布的代码有效并且有效。您看到的警告不应阻止您的应用正常运行。