对defaultProps的支持将从功能组件中删除

Question

我在 React 功能组件中遇到与 defaultProps 相关的警告，特别是在使用 recharts 的组件中。警告消息是：

Warning: YAxis: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.

这是我组件的相关部分：

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';
import { OutputData } from '@/utils/type';

export function Overview({ data }: { data: OutputData[] }) {
  const yAxisProps = {
    yAxisId: 'strom',
    type: 'number',
    domain: ['dataMin - 100', 'dataMax + 100'],
    unit: ' A',
  };

  const yAxisRightProps = {
    yAxisId: 'abhub',
    type: 'number',
    domain: ['dataMin-1', 'dataMax+1'],
    unit: ' mm',
    orientation: 'right',
  };

  return (
    <ResponsiveContainer width='100%' height={400}>
      <LineChart
        width={500}
        height={300}
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray='3 3' />
        <XAxis dataKey='t' scale='linear' unit=' ms' />
        <YAxis {...yAxisProps} />
        <YAxis {...yAxisRightProps} />
        <Tooltip />
        <Legend />
        <Line
          yAxisId='strom'
          type='monotone'
          dataKey='strom'
          stroke='#8884d8'
          activeDot={{ r: 8 }}
        />
        <Line
          yAxisId='abhub'
          type='monotone'
          dataKey='abhub'
          stroke='#82ca9d'
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

我尝试用 JavaScript 默认参数（yAxisProps 和 yAxisRightProps 对象）替换 defaultProps，但警告仍然存在。

如何在概述组件中正确解决此警告？使用 recharts 时处理 React 功能组件中的默认属性的正确方法是什么？

任何见解或指导将不胜感激！

Answer 1

解决方案是：npm i recharts@alpha

Answer 2

“警告：XAxis：在未来的主要版本中，将对 defaultProps 的支持将从功能组件中删除。请改用 JavaScript 默认参数。”

npm 我 recharts@alpha 删除了错误。

Answer 3

我也有这个错误。正如其他人所建议的，我尝试安装 alpha 版本，但我之前检查过 2.15.0，也可以。我不确定，但我猜这个版本比 alpha 更好安装（基于 npm 上每周的下载量）。

Answer 4

“警告：XAxis：在未来的主要版本中，将对 defaultProps 的支持将从功能组件中删除。请改用 JavaScript 默认参数。”

我面临这个问题。运行以下代码并重新启动您的项目。它对我有用。

npm i recharts@alpha removed the errors.

Answer 5

我也有同样的问题。 npm 我 recharts@alpha 确实有效:-)

Answer 6

我也遇到了同样的问题。 npm i recharts@alpha 确实有效。 但运行此命令后，必须记住再次重新启动前端项目。然后，所有相关的错误和警告将被删除。