Этим утром я пытался поставить все свои компоненты в CSS Grid. Но я получил ошибку.

Я определил компонент, который вызывает проблему, но даже после попытки всех решений, основанных на переполнении стека (которые обеспечивают

Здесь ошибка

*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
1
ArBabacar_ 26 Сен 2019 в 11:31

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>

рабочий пример

3
Gaël S 26 Сен 2019 в 08:50