reactjs - "famous"元素类型无效错误

Question

今天早上我尝试将所有组件放入 CSS 网格中。但我遇到了一个错误。

我已经确定了导致问​​题的组件，但即使在尝试了 Stack Overflow 上建立的所有解决方案(它提供了

错误在这里

*Element type is invalid:
expected a string (for built-in components)
or a class/function (for composite components)
but got: undefined. 
You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.

这里是(顽皮的)组件

import React  from "react";
import {ResponsiveContainer,AreaChart,Area,CartesianGrid,XAxis,YAxis,Tooltip,Legend} from "recharts";

const ErrorChart = ({data}) =>{


return (
    <div  className="chart-container" style={{ width: '40%', height: 300 }}>
    <ResponsiveContainer>
      <AreaChart
        data={data}
        margin={{
          top: 10, right: 30, left: 0, bottom: 0,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="time" />
        <YAxis />
        <Tooltip />
        <Area type="monotone" dataKey="number" stroke="#8884d8" fill="#8884d8" />
      </AreaChart>
      <Legend/>
    </ResponsiveContainer>
  </div>
  );

}
export default ErrorChart

Answer 1

经过试验，要消除错误，似乎Legend必须位于ResponsiveContainer之外:

<div className="chart-container" style={{ width: "40%", height: 300 }}>
      <ResponsiveContainer>
        <AreaChart
          data={data}
          margin={{
            top: 10,
            right: 30,
            left: 0,
            bottom: 0
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="time" />
          <YAxis />
          <Tooltip />
          <Area
            type="monotone"
            dataKey="number"
            stroke="#8884d8"
            fill="#8884d8"
          />
        </AreaChart>
      </ResponsiveContainer>
      <Legend />
    </div>

working example