参数必须是 React 元素，但你传递了 undefined

Question

我正在尝试使用 recharts 中的 ResponsiveContainer 进行反应并收到此错误。

React.cloneElement(...): The argument must be a React element, but you passed undefined.

我的示例代码：

import React from 'react';
import { ResponsiveContainer } from 'recharts';

function App() {
  return (
       <ResponsiveContainer>
       </ResponsiveContainer>
  );
}

Answer 1

您需要将图表放入容器中。 ResponsiveContainer 并非设计为独立工作，如果没有子组件，将会抛出您看到的错误。

这是来自 documentation 的示例：

<ResponsiveContainer width={700} height="80%">
  <AreaChart data={data}
    margin={{ top: 20, right: 30, left: 0, bottom: 0 }}>
    <XAxis dataKey="name" />
    <YAxis />
    <CartesianGrid strokeDasharray="3 3" />
    <Tooltip />
    <ReferenceLine x="Page C" stroke="green" label="Min PAGE" />
    <ReferenceLine y={4000} label="Max" stroke="red" strokeDasharray="3 3" />
    <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
  </AreaChart>
</ResponsiveContainer>

参数必须是 React 元素，但你传递了 undefined

The argument must be a React element, but you passed undefined

reactjs

recharts