反应导入重新图表失败

如何解决反应导入重新图表失败

我正在尝试使用 recharts 形成一个 React 项目，但我不能简单地从它的库中导入组件然后使用它。

我在 package.json 中导入它

"recharts": "^2.0.9",

我的 index.js 不能更轻

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {
  Radar,RadarChart,PolarGrid,PolarangleAxis,PolarRadiusAxis,ResponsiveContainer,} from 'recharts';

const info = {
  datas: [
    {
      subject: 'test1',A: 3,fullMark: 5,},{
      subject: 'test2',A: 5,{
      subject: 'test3',A: 1,{
      subject: 'test4',A: 0,{
      subject: 'test5',{
      subject: 'test6',],dataKeys: ['A'],};

ReactDOM.render(
  <ResponsiveContainer height='100%' width='100%'>
    <RadarChart cx='50%' cy='50%' data={info.datas} outerRadius='80%'>
      <PolarGrid />
      <PolarangleAxis dataKey='subject' />
      <PolarRadiusAxis />
      {info.dataKeys.map((dataKey,index) => (
        <Radar
          dataKey={dataKey}
          fill={info.fill || '#8884d8'}
          fillOpacity={0.6}
          key={index}
          name='Mike'
          stroke={info.stroke || '#8884d8'}
        />
      ))}
    </RadarChart>
  </ResponsiveContainer>,document.getElementById('radar')
);

这是错误消息，通常当您错过导入时会发生这种情况，但这里与他们在文档中提到的相同。

未捕获的错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

关注

组件出现上述错误： 在 div 在 ResizeDetector (http://localhost:3000/static/js/vendors~main.chunk.js:56892:24) 在响应容器 (http://localhost:3000/static/js/vendors~main.chunk.js:79234:5)

有什么想法吗？

解决方法

我发现了问题。

您必须为 ResponsiveContainer 指定一个固定的高度。

所以我把这个 <ResponsiveContainer height='100%' width='100%'> 改成了那个 <ResponsiveContainer height={400} width='100%'>。

错误在他们的例子中。例如：https://recharts.org/en-US/examples/SimpleRadarChart