将 Recharts.js 库导入 jsx react 文件

Question

我希望将Recharts用作我的 React 应用程序的图形系统。

要安装我已经转到安装指南并在终端中输入以下命令

$ npm install recharts

我的 jsx 文件看起来像下面的代码： import React from "react"; 从“react-dom”导入 ReactDOM；从“recharts”导入ReCharts；

var App = React.createClass({
  render: function() {
    var data = [{ name: 'a', value: 12 }];
    return (
     <LineChart width={400} height={400} data={data}>
      <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    </LineChart>
    );
  }
});

ReactDOM.render(<App/>, document.getElementById('app'));

它不起作用，因为我没有正确导入充值。任何人都可以建议和解释应该如何导入它，以及关于我如何知道我是否在其文档中没有任何明确指导的情况下导出另一个库的任何建议。

Answer 1

你需要 importLineChart和Linecomponents from Recharts，因为这个库没有默认的导出Recharts index

import { LineChart, Line } from 'recharts';

更新

您还需要更改dataKey，从'uv'到'value'因为在data您value用作图表值的键

Example