Recharts 在 React 中不起作用 - “recharts”不包含名为“Recharts”的导出答案

【问题标题】：Recharts not working in React - 'recharts' does not contain an export named 'Recharts'Recharts 在 React 中不起作用 - “recharts”不包含名为“Recharts”的导出
【发布时间】：2018-03-01 06:34:01
【问题描述】：

我想使用 Recharts 绘制图表。

我目前正在查看他们网站上文档中给出的示例。

一旦我将他们的代码复制到我的应用程序中，我就会遇到以下错误：

'recharts' does not contain an export named 'Recharts'.

数据包中的某些东西会出错吗？

我该如何清除这个错误？

import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import Api from '../../Api'
import DatePicker from 'material-ui/DatePicker';
import RaisedButton from 'material-ui/RaisedButton';
import { Recharts } from 'recharts';

const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } = Recharts;
    const data = [
      { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
      { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
      { name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
      { name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
      { name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
      { name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
      { name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
    ];

 render() {

   return (
      <div className="container">
         <LineChart width={600} height={300} data={this.data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis dataKey="name"/>
       <YAxis yAxisId="left" />
       <YAxis yAxisId="right" orientation="right" />
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line yAxisId="left" type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
       <Line yAxisId="right" type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart> 

      </div>
    );
  }
}

【问题讨论】：

标签： javascript reactjs charts recharts

【解决方案1】：

您似乎输入错误。您可以像这样导入它：

import * as Recharts from 'recharts';

或者您可以像这样直接导入单个导出：

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts;

【讨论】：