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

“著名”元素类型无效错误

1 个答案: