JSX元素類型'Line'不是JSX元素的構造函數

Question

我正在嘗試使用帶有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

Answer 1

Line組件由react-chartjs-2導出為命名導出。 您需要按其名稱導入：

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

現場示例：